מרכוז ב-CSS

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

Adam Argyle

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

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

האתגר

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

'הצלצול של העמידות'

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

1. דחוס: תוכלו להשתמש באפשרות הזו כדי לשנות את הרוחב של התמונה.
2. מעוות: תוכלו להשתמש באפשרות של מרכוז כדי להתמודד עם שינויים בגובה
3. כפילות: התוכן צריך להיות ממורכז באופן דינמי בהתאם למספר הפריטים
4. עריכה: הגדרת מרכז צריכה להיות דינמית בהתאם לאורכו ולשפה של התוכן
5. זרימה: הגדרת מרכז צריכה להיות ניטרלית לכיוון המסמך ולמצב הכתיבה

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

מקרא

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

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

5 המתמודדים

5 שיטות לרכז את האנרגיה נכנסות לטורניר Resilience Ringer, רק אחת תקבל את הכתר של Resilience 👸.

1. מרכז התוכן

1. Squish: מצוין!
2. Squash: מצוין!
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. זרימה: מעולה!

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

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

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

3. Autobot

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

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

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

מצוין למרכוז סמלים או רכיבי פסאודו.

4. צמר גפן מתוק

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

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

.fluffy-center {
  padding: 10ch;
}

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

5. Pop & Plop

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

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

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

הזוכה

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

[תרועת תופים]

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 היא כל כך מינימלית שקל להתעלם ממנה כטכניקה לסידור תמונות במרכז, אבל היא אחת מהשיטות המועדפות שלי לסידור תמונות במרכז. הוא כל כך אטומי שלפעמים אני שוכח שאני משתמש בו.

סיכום

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

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

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

• טריקים לשירותי CSS עם פוסט בבלוג