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

Changhao Han

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

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

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

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

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

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

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

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

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

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

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

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