מרכוז ב-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: המרכוז צריך להיות אגנוסטי לגבי כיוון המסמך ומצב הכתיבה

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

מקרא

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

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

5 המתמודדים

‫5 טכניקות למיקום במרכז נכנסות לזירה של Resilience Ringer, רק אחת מהן תקבל את Resilience Crown 👸.

1. מרכז התוכן

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

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

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

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

2. Gentle Flex

1. Squish: מעולה!
2. סקווש: מצוין!
3. שכפול: מצוין!
4. עריכה: מצוין!
5. Flow: מעולה!

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

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

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

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

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

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

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

מומלץ לשימוש כשרוצים למרכז סמלים או פסאודו-אלמנטים.

4. Fluffy Center

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

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

.fluffy-center {
  padding: 10ch;
}

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

5. Pop & Plop

1. Squish: בסדר
2. סקווש: בסדר
3. כפילות: לא טוב
4. עריכה: בסדר
5. Flow: fine

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

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

הזוכה

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

[drum roll]

Gentle Flex 🎉

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

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

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

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

סיכום

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

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

רמיקסים מהקהילה

• ‫CSS Tricks עם פוסט בבלוג