מדריך המעצבים ל- Flexbox ו- Grid

מה שמעצבים צריכים לדעת על כלי פריסת טרנספורמציה אלה.

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

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

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

Flexbox

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

עטיפה משופרת

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

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

דוגמה לעטיפה משופרת באמצעות Flexbox

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

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

ריווח ויישור משופרים

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

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

דוגמא להפצת חלל משופרת באמצעות Flexbox

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

סדר מקור

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

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

דוגמה להזמנת פריט באמצעות Flexbox

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

פריסת רשת

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

מתאים למטרה

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

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

דוגמה לפריסת רשת

פריסות אינטרנט מהדור הבא

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

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

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

מילת אזהרה

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

יש עוד. הרבה יותר.

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

Flexbox

רשת

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

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