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

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

Una Kravets

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

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

יחידות וערכי CSS רמה 4

תמיכת דפדפן

min()

max()

clamp()

Usage

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

טיפוגרפיה נוזלית

כדי להפעיל טיפוגרפיה נוזלית, Mike Riethmeuller הפך שיטה שמשתמשת בפונקציה clamp() כדי להגדיר גודל גופן מינימלי וגודל מקסימלי של גופן ולאפשר התאמה בין הגדלים האלה.

לפני clamp(), עיצוב של שינוי גודל הגופנים נדרש מחרוזות סגנון מורכבות. עכשיו אתם יכולים לתת לדפדפן לעשות את העבודה בשבילכם. עליכם להגדיר את גודל הגופן המינימלי קביל (לדוגמה, 1.5rem לכותרת), גודל מקסימלי (למשל 3rem) וגודל אידיאלי (למשל 5vw). עכשיו יש לכם טיפוגרפיה שמשתנה בהתאם לרוחב אזור התצוגה של הדף עד שהוא מגיע לערכים המינימליים והמקסימליים המגבילים, באמצעות קוד קטן מאוד:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

מקורות מידע נוספים

• ערכים ויחידות של CSS ב-MDN
• מפרט של ערכי CSS ויחידות ברמה 4
• מאמר של טריקים ב-CSS לגבי רוחב רכיב פנימי
• סקירה כללית של min(), max(), clamp() של Ahmad Shadeed

תמונת שער מ-@yer_a_ לצילום ב-UnFlood.