כלים ל'רשת CSS' בכלי הפיתוח

למה יצרנו את הכלי CSS Grid Tooling?

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

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

תכנון כלים

מאמץ משותף בין Chrome ל-Edge

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

סיכום התכונות

קיימות שלוש תכונות עיקריות לכלי רשת של CSS:

1. שכבת-על קבועה וספציפית לרשת, שעוזרת לקבל מידע על ממדים ועל סדר הפריטים
2. תגים בעץ ה-DOM שמדגישים מאגרי רשת של CSS ומחליפים שכבות-על של רשת
3. חלונית סרגל צד שמאפשרת למפתחים להתאים אישית את התצוגה של שכבות-על ב-DOM (למשל, שינוי הצבע והרוחב של כללים)
4. עורך CSS Grid בחלונית סגנונות

נבחן אותן לעומק בהמשך.

שכבות-על קבועות ברשת

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

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

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

בואו נראה איך השגנו את שניהם.

גדלים מחושבים לעומת גדלים מחושבים

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

.grid-cards {
    display: grid;
    width: 200px;
    height: 300px;
    grid-template-rows: 20% 0.3fr 100px minmax(100px, auto);
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

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

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

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

אנחנו משתמשים עכשיו ב-API הזה כדי להציג את הערכים שנוצרו בשכבות-על ברשת.

שכבות-על קבועות

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

לדוגמה:

עם זאת, שכבת-העל ב-DevTools לא תוכננה מתוך מחשבה על מנגנון מרובה מרכיבים ותתמיד זה (הוא נוצר לפני שנים רבות). לכן היינו צריכים לארגן מחדש את עיצוב שכבת-העל כדי שזה יפעל. הוספנו GridHighlightTool חדשה לחבילה קיימת של כלי הדגשה, שהתפתחה מאוחר יותר ל-PersistentTool גלובלי להדגשת כל שכבות-העל הקבועות בבת אחת. עבור כל סוג של שכבת-על קבועה (Grid, Flex וכו'), אנחנו שומרים שדה הגדרה תואם בתוך הכלי הקבוע. בכל פעם שההדגשה של שכבת-העל תבדוק מה צריך לצייר, היא תכלול גם את ההגדרות האלה.

כדי לאפשר לכלי הפיתוח לשלוט במה שצריך להדגיש, יצרנו פקודת CDP חדשה לשכבת-על של תצוגת רשת קבועה:

# Highlight multiple elements with the CSS Grid overlay.
command setShowGridOverlays
  parameters
    # An array of node identifiers and descriptors for the highlight appearance.
    array of GridNodeHighlightConfig gridNodeHighlightConfigs

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

תגי רשת בזמן אמת

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

שינויים בעץ DOM

מאחר שתגי Grid הם לא התגים היחידים שאנחנו רוצים להציג ב-DOM Tree, אנחנו רוצים להקל ככל האפשר על הוספת התגים. ElementsTreeElement, הכיתה שאחראית ליצירה ולניהול של רכיבי DOM Tree נפרדים בכלי פיתוח עודכנה. היא כוללת כמה שיטות ציבוריות חדשות להגדרת תגים. אם יש כמה תגים עבור רכיב אחד, הם ממוינים לפי קטגוריות של תגים, ולאחר מכן שמות שלהם לפי סדר אלפביתי אם הם באותה קטגוריה. הקטגוריות הזמינות כוללות Security, Layout וכו', ו-Grid שייכות לקטגוריה Layout.

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

איך קיבלנו עדכוני סגנון בזמן אמת?

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

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

{
  "display": "grid",
  "display": "inline-grid",
}

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

חלונית פריסה

על אף שתגי DOM Tree עוזרים ליכולת הגילוי של רשתות CSS, לפעמים אנחנו רוצים לראות רשימה של כל רשתות ה-CSS בדף מסוים, ולהפעיל או להשבית בקלות את שכבות-העל הקבועות שלהן כדי לנפות באגים בפריסות שלהן. לכן החלטנו ליצור חלונית סרגל צד ייעודית רק לכלי הפריסה. כך יש לנו מקום ייעודי לאיסוף כל קונטיינרים של Grid ולהגדרת כל האפשרויות לשכבות-על של הרשת. החלונית Layout הזו גם מאפשרת לנו להוסיף לכאן גם כלים עמוסים לפריסה (למשל Flexbox או שאילתות של Container).

מצא רכיבים לפי סגנונות מחושבים

כדי להציג את רשימת מאגרי ה-Grid Grid בחלונית Layout, אנחנו צריכים למצוא צומתי DOM לפי סגנונות מחושבים. אחרי שכלי הפיתוח פתוחים, לא כל צומתי ה-DOM מוכרים ל-DevTools. במקום זאת, כלי הפיתוח מכירים רק קבוצת משנה קטנה של צמתים, בדרך כלל ברמה העליונה של היררכיית ה-DOM, רק כדי להתחיל להשתמש ב-Devtools DOM Tree. מטעמי ביצועים, צמתים אחרים יאוחזרו רק לפי בקשה נוספת. כלומר, אנחנו זקוקים לפקודת CDP חדשה כדי לאסוף את כל הצמתים בדף ולסנן אותם לפי הסגנונות המחושבים:

# Finds nodes with a given computed style in a subtree.
experimental command getNodesForSubtreeByStyle
  parameters
    # Node ID pointing to the root of a subtree.
    NodeId nodeId
    # The style to filter nodes by (includes nodes if any of properties matches).
    array of CSSComputedStyleProperty computedStyles
    # Whether or not iframes and shadow roots in the same target should be traversed when returning the
    # results (default is false).
    optional boolean pierce
  returns
    # Resulting nodes.
    array of NodeId nodeIds

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

סיכום

CSS Griding Tool היה אחד מהפרויקטים הראשונים של כלי העיצוב של DevTools שתמכו בתכונה Web Platform. היא הושקה לראשונה בכלים בסיסיים רבים ב-DevTools, כגון שכבות-על קבועות, תגי DOM Tree והחלונית Layout, וסלל את הדרך לכלי פריסה עתידיים בכלי הפיתוח של Chrome, כמו Flexbox ושאילתות Container. הם גם הניחו את היסודות לעורכי Grid ו-Flexbox, שמאפשרים למפתחים לשנות יישורים של Grid ו-Flexbox בצורה אינטראקטיבית. נעבור עליהן בעתיד.

מורידים את הערוצים של התצוגה המקדימה.

כדאי להשתמש ב-Chrome Canary, Dev או בטא כדפדפן הפיתוח שמוגדר כברירת מחדל. ערוצי התצוגה המקדימה האלה מעניקים לך גישה לתכונות החדשות של כלי הפיתוח, בודקים ממשקי API מתקדמים של פלטפורמת האינטרנט ומוצאים בעיות באתר לפני שהמשתמשים נתקלים בבעיות!

יצירת קשר עם צוות כלי הפיתוח ל-Chrome

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

• שלחו לנו הצעה או משוב בכתובת crbug.com.
• כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות     > עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח.
• אפשר לשלוח ציוץ אל @ChromeDevTools.
• אפשר לכתוב תגובות לגבי 'מה חדש' בסרטוני YouTube או בקטע 'טיפים לשימוש בכלי הפיתוח' בסרטוני YouTube.