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

Changhao Han

למה יצרנו כלים של רשתות CSS?

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

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

תכנון כלים

פעילות משותפת בין Chrome ל-Edge

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

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

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

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

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

שכבות-על מתמידות ברשת

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

המידע הנוסף הזה מוצג בשכבת-על מעל אלמנט העניין. בעבר, כשמעבירים את העכבר מעל רשת שבה כלי הפיתוח פתוחים, שכבת-העל הציגה את פרטי מודל התיבה שלה, אבל הגבילה את הדגשת התוכן לפריטים ברשת בלי להסביר למה זה קרה. יש שני חלקים עיקריים שאנחנו רוצים להוסיף לשכבות-על של רשת 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));
}

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

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

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

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

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

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

לדוגמה:

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

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

# 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, אנחנו רוצים להפוך את הוספת התגים לקלה ככל האפשר. ב-ElementsTreeElement, הכיתה שאחראית ליצירה ולניהול של רכיבי עץ DOM בודדים בכלי הפיתוח, עודכנה כמה שיטות ציבוריות חדשות להגדרת תגים. אם יש כמה תגים עבור רכיב אחד, הם ממוינים לפי קטגוריות של תגים ולאחר מכן השמות שלהם לפי סדר אלפביתי אם הם שייכים לאותה קטגוריה. הקטגוריות הזמינות כוללות את Security, Layout וכו', והקטגוריה Grid שייכת לקטגוריה Layout.

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

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

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

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

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

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

חלונית הפריסה

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

חיפוש אלמנטים לפי סגנונות מחושבים

כדי להציג את הרשימה של קונטיינרים של רשת CSS בחלונית Layout, אנחנו צריכים למצוא צומתי DOM לפי סגנונות מחושבים. עכשיו הגענו למסקנה שהמצב הזה לא פשוט, כי לא כל צומתי ה-DOM מוכרים לכלי הפיתוח כשכלי הפיתוח פתוחים. במקום זאת, כלי הפיתוח מכירים רק קבוצת משנה קטנה של צמתים, בדרך כלל ברמה העליונה של היררכיית ה-DOM, רק כדי להתחיל בעבודה עם עץ DOM של Devtools. מטעמי ביצועים, צמתים אחרים יאוחזרו רק לאחר בקשה נוספת. המשמעות היא שאנחנו צריכים פקודת 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

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

סיכום

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

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

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

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

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

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