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 Tricks (טריקים בשירות 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);
}

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

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

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

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

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

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

תמונת השער מ-@yer_a_wizard מבטלים את הפתיחה.