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