עברו סדרה של בדיקות כדי לראות איזו מהן הכי עמידה בפני שינויים, לבצע 5 טכניקות של מרכוז.
מירכוז ב-CSS הוא אתגר ידוע לשמצה, שכולל גם בדיחות ועגירות. 2020 שירות ה-CSS כבר בוגר ועכשיו אנחנו יכולים לצחוק על הבדיחות האלה בכנות, לא שיניים מוקפצות.
אם אתם מעדיפים סרטון, הנה גרסה של YouTube לפוסט:
האתגר
יש סוגים שונים של מרכוז. מתרחישי שימוש שונים, מספר דברים במרכז וכו'. כדי להדגים נימוק שעומד מאחורי 'מנצח' של שיטת מרכוז, שיצר את Resilience Ringer. זאת סדרה של בדיקות לחץ לכל ריכוז לאזן בין המודעות שלכם לבין עצמכם, ולבחון את הביצועים שלהן. בסוף, אני חושף את השיטה עם הניקוד הגבוה ביותר, וגם את השיטה 'החשובה ביותר'. אנחנו מקווים שתצאו לדרך עם שיטות ופתרונות חדשים למרכז.
תוכנת צלצול
'צלצול חוסן' (resilience Ringer) הוא ייצוג של האמונות שלי, צריכה להיות עמידה בפני פריסות בינלאומיות, אזורי תצוגה בגודל משתנה, עריכות טקסט ודינמיות תוכן. העקרונות האלה עזרו לעצב את מבחני העמידות הבאים שיטות למרכז הריכוז:
- מעוך: מרכוז המערכת אמורה להיות מסוגל לטפל בשינויים ברוחב
- דחוס: מרכוז צריך להיות מסוגל לטפל בשינויים בגובה
- עותק משוכפל: מירכוז צריך להיות דינמי למספר הפריטים
- עריכה: מרכוז התוכן צריך להיות דינמי לאורך ולשפת התוכן
- זרימה: מרכוז הטקסט צריך להיות כיוון המסמך ומצב הכתיבה
הפתרון הזוכה צריך להפגין את העמידות שלו על ידי שמירת התוכן במרכז, תוך כדי מעיכה, כיווץ, שכפול, עריכה והחלפה אמצעים ומסלולים שונים לבחירת שפה. מרכז מהימן ועמיד, שהוא מרכז בטוח.
מקרא
סיפקתי כמה רמזים חזותיים כדי לעזור לך לשמור על מטא-מידע בהקשר:
- גבול ורוד מציין בעלות על סגנונות מרכוז
- התיבה האפורה היא הרקע של הקונטיינר שרוצים למקם אותו במרכז. פריטים
- לכל ילד יש צבע רקע לבן, כך שאפשר לראות את האפקטים של הילד או הילדה. לשיטת מרכוז יש גדלים של תיבות צאצא (אם יש)
5 המתחרים
5 טכניקות מרכוך ייכנסו לצלצול העמידות, רק אחת תקבל את כתר עמיד 👸.
1. מרכז התוכן
- Squish: נהדר!
- סקווש: מעולה!
- כפילות: מעולה!
- עריכה: מעולה!
- Flow: מעולה!
יהיה קשה לעבור את התמציתיות של display: grid
קיצור של place-content. מכיוון שהיא מרכזת ומצדיקה ילדים באופן גורף,
זו טכניקה חזקה של מרכוז הקבוצות של יסודות שרוצים לקרוא.
.content-center {
display: grid;
place-content: center;
gap: 1ch;
}
- התוכן ממורכז גם כששטח מוגבל ואפשרויות נוספות
- פעולות עריכה ותחזוקה מרוכזות במקום אחד
- הפער מבטיח ריווח שווה בין n צאצאים
- הרשת יוצרת שורות כברירת מחדל
- הצאצא הרחב ביותר (
max-content) מגדיר את הרוחב של כל השאר. זו תהיה עסקנו יותר ב-Gentle Flex.
מתאים במיוחד לפריסות מאקרו שמכילות פסקאות וכותרות, אבות טיפוס בדרך כלל דברים שדורשים מרכוז באופן קריא.
2. גמישות עדינה
- מעיכה: מעולה!
- סקווש: מעולה!
- כפילות: מעולה!
- עריכה: מעולה!
- זרימה: מעולה!
עדינה גמישה היא אסטרטגיה מדויקת יותר רק לניהול מרכוז. הוא רך ועדין, כי
בניגוד ל-place-content: center, גודל תיבות הסימון לילדים לא השתנה במהלך
במרכז. בעדינות רבה ככל האפשר, כל הפריטים מועברים, ממורכזים ומרווחים.
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- מטפל רק ביישור, בכיוון ובהפצה
- פעולות עריכה ותחזוקה מרוכזות במקום אחד
- הפער מבטיח ריווח שווה בין n צאצאים
- רוב שורות הקוד
מתאים במיוחד לפריסות מאקרו וגם לפריסות מיקרו.
3. בוט אוטומטי
- מעיכה: מעולה
- סקווש: מעולה
- עותק כפול: תקין
- עריכה: מעולה
- זרימה: מצוין
הקונטיינר מוגדר להתאמה גמישה ללא סגנונות יישור, ואילו הצאצאים הישירים
מעוצבים עם שוליים אוטומטיים. יש משהו נוסטלגי ונהדר
margin: auto פועלים בכל צידי האלמנט.
.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}
- טריק כיפי
- מהיר ומלוכלך
- תוצאות מסורבלות בגלישה
- הסתמכות על הפצה במקום פער פירושה שהפריסות יכולות להתרחש עם ילדים הצדדים המגעים
- 'נדחף' אינו נראה אופטימלי ועלול להוביל לשינוי לגודל התיבה של הילד או הילדה
מעולה למרכז סמלים או פסאודו אלמנטים.
4. צמר גפן מתוק
- מעיכה: לא טובה
- סקווש: לא טוב
- עותק כפול: לא תקין
- עריכה: מעולה!
- זרימה: מעולה! (כל עוד משתמשים במאפיינים לוגיים)
מתחרה 'מרכז עם פרח' הוא ללא ספק המתנדב הנשמע הכי טעים שלנו, שיטת מרכוז שהיא לחלוטין בבעלות של אלמנט/ילד. רוצה לראות את הגרסה הוורודה הפנימית שלנו לבד? גבול!?
.fluffy-center {
padding: 10ch;
}
- הגנה על תוכן
- אטומי
- כל בדיקה מכילה באופן חשאי את אסטרטגיית מרכוז המידע
- רווח המילים
- אשליה שלא מועילה
- יש התנגשות בין המכל לבין הפריטים, באופן טבעי מכיוון ששניהם הם תקיפים מאוד בנוגע למידות שלהם
מתאים במיוחד להתמקדות במילים או לביטויים, תגים, גלולות, לחצנים, צ'יפים עוד.
5. פופ ו- פלופ
- מעיכה: אוקיי
- סקווש: בסדר
- עותק כפול: לא תקין
- עריכה: מותר
- זרימה: תקין
"פופ" כי המיקום המוחלט מוציא את הרכיב מחוץ למצב הרגיל . ה-"plop" מהשמות מגיעים כשהתוכן השימושי ביותר בעיניי: להתנופף מעל לדברים אחרים. זוהי שכבת-על קלאסית ושימושית שממרכזת שיטה גמישה ודינמית לגודל התוכן. לפעמים אתם צריכים רק כדי להעלות את ממשק המשתמש על גבי ממשק משתמש אחר.
- שימושי
- אמין
- כשצריך אותו, הוא חשוב
- קוד עם ערכי אחוזים שליליים
- נדרש
position: relativeכדי לאלץ בלוק מכיל - מעברי שורה מוקדמים ומביכים
- יכולה להיות רק חסימה אחת לכל חסימה, ללא מאמץ נוסף
מעולה עבור חלונות מודאליים, טוסטים והודעות, אפקטים של סטאק, אפקטים של עומק וחלונות קופצים.
הזוכה
אם הייתי על אי והייתה לי רק שיטת מרכוז אחת, זה היה...
[גלגול תופים]
עדין Flex 🎉
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
תמיד אפשר למצוא אותו בגיליונות הסגנונות שלי כי הוא שימושי גם למאקרו וגם פריסות מיקרו. זה פתרון מקיף ואמין עם תוצאות שמתאימות לציפיות שלכם. בנוסף, בגלל שאני חובבת מידות, אני נוטה לסיים את הלימודים שלי בפתרון הזה. נכון, צריך להקליד הרבה מילים, אבל על היתרונות שלהן עולה על הקוד הנוסף.
ה-MVP
Fluffy Center
.fluffy-center {
padding: 2ch;
}
פלאפי סנטר הוא כל כך זעיר שקל להתעלם ממנו כשיטת מרכוז, אבל הוא מרכיב חשוב באסטרטגיות המרכוז שלי. הוא כל כך אטומי שלפעמים אני שוכח שאני משתמש בו.
סיכום
אילו סוגים של דברים לא עומדים באסטרטגיות הריכוז שלך? אילו אתגרים נוספים שאפשר להוסיף לצלצול החוסן? שקלתי תרגום ו מתג גובה אוטומטי בקונטיינר... מה עוד!?
עכשיו אתה יודע איך עשיתי את זה, איך היית?! רוצה לגוון את הגישות שלנו? וללמוד את כל הדרכים לבנות באינטרנט. עקבו אחר ה-Codelab עם הפוסט הזה כדי ליצור דוגמה למרכז בקרה משלכם, בדיוק כמו הדוגמאות בפוסט הזה. ציוץ לי את הגרסה שלכם, ואני אוסיף אותה הקטע רמיקסים מהקהילה מופיע בהמשך.