מנואל מאטוזוביץ': מקסימום() תחבולה

בדרך של א פוסט מאת מנואל מטוזוביץ' שזה בדרך של הדגמה מאת תמני אפיף.

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

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

.wrapper {
  max-width: 64rem;
  margin: 0 auto;
  width: 100%;
}

…איפה:

• מקסימום () מקבל רשימה מופרדת בפסיקים של ערכי CSS מספריים, כאשר הערך המוחל הוא הגדול ביותר (או כ MDN אומר את זה, ה"חיובי ביותר") אחד בסט.
• 0px הוא הערך הראשון בסט, מה שמבטיח שהערך הקטן ביותר תמיד יהיה גדול מאפס פיקסלים.
• (100% - 64rem) הוא ה"ערך" השני בקבוצה, אך מבוטא כחישוב (שים לב calc() מיותר) שמפחית את ה- max-width של האלמנט (64rem) מהזמינות המלאה שלו width (100%). מה שנשאר זה המקום שלא תופס האלמנט.
• ((100% - 64rem) / 2)) מחלק את החלל הנותר באופן שווה מכיוון שאנו מחלקים אותו בין הגבולות המוטבעים של האלמנט.
• max(0px, ((100% - 64rem) / 2)) משווה 0px ו (100% - 64rem) / 2). נעשה שימוש בערך הגדול ביותר. זו תהיה התוצאה של המשוואה ברוב המקרים, אבל אם 64rem הוא גדול מתמיד מהערך המחושב של האלמנט המלא 100% רוחב, הוא ינעל את הערך הזה באפס כדי להבטיח שהוא לעולם לא יביא לערך שלילי.
• margin-inline הוא המאפיין שהערך המנצח קובע, שמחיל שולי על הצדדים המוטבעים של האלמנט - זה הקיצור ההגיוני להגדרת אותו ערך ל- margin-left ו margin-right תכונות גשמיות.

זה אותו סוג של רעיון כריס שיתף לפני זמן מה שמשתמש ב-CSS max()פונקציה לפתור את "בעיה פנימית" - מיכל התומך בצבע רקע עם דימום מלא תוך הגבלת התוכן בתוכו padding.

max(), calc(), margin-inline... זה הרבה CSS חדשני! ומנואל ממש מטפחת באמצע כתיבה על תכונות CSS מודרניות אלו ואחרות במשך 100 ימים.

קישור ישיר →