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

Changhao Han
Changhao Han
X GitHub

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

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

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

עיצוב כלי ייצור

מאמץ משותף של Chrome ו-Edge

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

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

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

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

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

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

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

ALT_TEXT_HERE

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

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

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

גדלים שנקבעו על ידי כותב הדף לעומת גדלים מחושבים

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

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

ALT_TEXT_HERE

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

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

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

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

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

לדוגמה:

ALT_TEXT_HERE

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

ALT_TEXT_HERE

שינויים בעץ ה-DOM

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

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

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

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

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

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

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

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

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

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

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

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

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