מרכוז ב-CSS

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

Adam Argyle

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

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

האתגר

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

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

ה-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. Flow: מצוין!

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

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

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

3. Autobot

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

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

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

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

4. מרכז לקיק

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

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

.fluffy-center {
  padding: 10ch;
}

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

5. Pop & Plop

1. Squish: בסדר
2. ביטול: בסדר
3. Duplicate: לא טוב
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 עם פוסט בבלוג