מרכוז ב-CSS

בסרטון הזה מוצגות 5 טכניקות למרכוז, שעוברות סדרה של בדיקות כדי לראות איזו מהן הכי עמידה לשינויים.

Adam Argyle

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

אם אתם מעדיפים לצפות בסרטון, הנה גרסת YouTube של הפוסט הזה:

האתגר

יש סוגים שונים של מרכוז. יש תרחישי שימוש שונים, מספר שונה של פריטים שצריך למרכז וכו'. כדי להדגים את ההיגיון מאחורי שיטת המרכוז "המנצחת", יצרתי את The Resilience Ringer. זו סדרה של בדיקות עומס לכל אסטרטגיית מרכוז כדי לאזן את המרכיבים שלה, ואתם יכולים לבחון את הביצועים שלהן. בסוף, אני חושף את הטכניקה שקיבלה את הציון הכי גבוה, וגם את הטכניקה "הכי חשובה". אנחנו מקווים שתצאו מהסדנה עם טכניקות ופתרונות חדשים שיעזרו לכם להתמרכז.

הצלצול של החוסן

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

  1. Squished: centering should be able to handle changes to width
  2. Squashed: centering should be able to handle changes to height
  3. עותק כפול: המרכוז צריך להיות דינמי בהתאם למספר הפריטים
  4. עריכה: המרכוז צריך להיות דינמי בהתאם לאורך ולשפה של התוכן
  5. Flow: centering should be document direction and writing mode agnostic

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

Legend

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

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

‫5 המתמודדים

5 טכניקות להתמקדות נכנסות לזירת החוסן, רק אחת תזכה בכתר החוסן 👸.

1. מרכז התוכן

עריכה ושכפול של תוכן באמצעות VisBug
  1. סקוויש: מעולה!
  2. סקווש: מעולה!
  3. שכפול: מעולה!
  4. עריכה: מעולה!
  5. זרימה: מצוין!

יהיה קשה להתעלות על התמציתיות של display: grid ועל הקיצור place-content. מכיוון שהיא ממקמת במרכז ומיישרת את הצאצאים באופן קולקטיבי, זו טכניקה טובה למרכז קבוצות של אלמנטים שנועדו לקריאה.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
יתרונות
  • התוכן ממורכז גם כשהמקום מוגבל ויש חריגה
  • כל פעולות העריכה והתחזוקה של המרכז נמצאות במקום אחד
  • המאפיין Gap מבטיח מרווחים שווים בין n רכיבי צאצא
  • כברירת מחדל, הרשת יוצרת שורות
חסרונות
  • הרוחב של כל שאר הרכיבים נקבע לפי הרכיב הרחב ביותר (max-content). נדון בזה בהרחבה בפרק גמישות מתונה.

מתאים במיוחד לפריסות מאקרו שמכילות פסקאות וכותרות, אבות טיפוס או דברים שצריכים להיות ממורכזים וקריאים.

2. Gentle Flex

  1. סקוויש: מעולה!
  2. סקווש: מעולה!
  3. כפילות: מעולה!
  4. עריכה: מעולה!
  5. זרימה: מעולה!

"גמישות עדינה" היא אסטרטגיה שמתמקדת רק במרכוז. הוא רך ועדין, כי בניגוד ל-place-content: center, הגדלים של תיבות הצאצאים לא משתנים במהלך המרכוז. כל הפריטים נערמים, ממורכזים ומרווחים בצורה הכי עדינה שאפשר.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
יתרונות
  • מטפל רק ביישור, בכיוון ובפיזור
  • כל העריכות והתחזוקה במקום אחד
  • המאפיין Gap מבטיח מרווחים שווים בין n רכיבי צאצא
חסרונות
  • הכי הרבה שורות קוד

מתאים לפריסות מאקרו ומיקרו.

3. בוט אוטומטי

  1. Squish: מעולה
  2. סקווש: מצוין
  3. כפילות: בסדר
  4. עריכה: מעולה
  5. זרימה: מצוינת

הקונטיינר מוגדר כ-flex ללא סגנונות יישור, והצאצאים הישירים מעוצבים עם שוליים אוטומטיים. יש משהו נוסטלגי ונפלא ב-margin: auto שעובד על כל הצדדים של האלמנט.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
יתרונות
  • טריק משעשע
  • מהיר ופשוט
חסרונות
  • תוצאות מוזרות כשמנסים להציג יותר מדי תוכן
  • הסתמכות על חלוקה במקום על מרווחים פירושה שפריסות יכולות להתרחש כשילדים נוגעים בצדדים
  • "דחיפה" של התיבה למיקום מסוים לא נראית אופטימלית ויכולה לגרום לשינוי בגודל של תיבת הצאצא

מתאים במיוחד למרכוז סמלים או רכיבי פסאודו.

4. מרכז רך

  1. Squish: לא טוב
  2. סקווש: גרוע
  3. כפילות: לא טוב
  4. עריכה: מעולה!
  5. זרימה: מעולה! (כל עוד משתמשים במאפיינים לוגיים)

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

.fluffy-center {
  padding: 10ch;
}
יתרונות
  • הגנה על תוכן
  • אטומי
  • כל בדיקה מכילה בסתר את אסטרטגיית המרכוז הזו
  • רווח בין מילים הוא פער
חסרונות
  • אשליה של חוסר תועלת
  • יש התנגשות בין הקונטיינר לפריטים, כי כל אחד מהם מוגדר בגודל קשיח.

מתאים במיוחד למרכוז של מילים או ביטויים, תגים, כפתורים, צ'יפים ועוד.

5. פופ ופלופ

  1. מעיכה: בסדר
  2. דלעת: בסדר
  3. כפילות: לא טוב
  4. עריכה: בסדר
  5. זרימה: תקינה

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

יתרונות
  • שימושי
  • אמין
  • כשצריך אותו, הוא שווה זהב
חסרונות
  • קוד עם ערכי אחוזים שליליים
  • נדרש position: relative כדי לאלץ בלוק מכיל
  • מעברי שורה מוקדמים ולא נוחים
  • יכול להיות רק בלוק אחד כזה בכל בלוק שמכיל אותו, בלי מאמץ נוסף

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

הזוכה

אם הייתי על אי בודד והייתה לי אפשרות לבחור רק טכניקה אחת למציאת מרכז, הייתי בוחר/ת ב…

[תיפוף]

Gentle Flex 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

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

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

המרכוז הרך הוא כל כך מיקרו שקל להתעלם ממנו כטכניקת מרכוז, אבל הוא מרכיב עיקרי באסטרטגיות המרכוז שלי. הוא כל כך אטומי שלפעמים אני שוכח שאני משתמש בו.

סיכום

מה יכול להפריע לכם להתרכז? אילו עוד אתגרים אפשר להוסיף לאתגר החוסן? חשבתי על תרגום ועל מתג גובה אוטומטי בקונטיינר… מה עוד?!

עכשיו, אחרי שאתם יודעים איך אני עשיתי את זה, איך אתם הייתם עושים את זה? בואו נגוון את הגישות שלנו ונלמד את כל הדרכים לבנות באינטרנט. כדי ליצור דוגמה משלכם למרכוז, כמו אלה שמופיעות בפוסט הזה, עקבו אחרי ה-codelab שמופיע בפוסט. צייצו לי את הגרסה שלכם, ואוסיף אותה לקטע רמיקסים של הקהילה שבהמשך.

הרשאה לקהילה ליצור רמיקסים