בדיקה של פריסות רשת של CSS

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

הדוגמאות שמוצגות בצילומי המסך שמצוינים במאמר הזה הן משני דפי האינטרנט הבאים: Fruitbox ו-Snack box.

הצגת רשתות CSS

אם הוחלו display: grid או display: inline-grid על רכיב HTML בדף, יופיע לצידו התג grid בחלונית רכיבים.

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

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

יישור פריטי רשת והתוכן שלהם באמצעות עורך הרשת

אתם יכולים ליישר פריטים ברשת ואת התוכן שלהם בלחיצה על לחצן במקום להקליד כללי CSS.

כדי ליישר פריטים ברשת ואת התוכן שלהם:

1. בחלונית רכיבים > סגנונות, לוחצים על הלחצן עורך רשת לצד display: grid.

   

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

   

3. בודקים את פריטי הרשת והתוכן שעברו התאמה באזור התצוגה.

אפשרויות לתצוגת רשת

הקטע רשת בחלונית פריסה מכיל שני קטעי משנה:

• הגדרות התצוגה של שכבת-העל
• שכבות-על של הרשת

נבחן לעומק כל אחד מקטעי המשנה האלה.

הגדרות התצוגה של שכבת-העל

הגדרות התצוגה של שכבת-על כוללות שני חלקים:

a. תפריט נפתח הכולל את האפשרויות הבאות:

• הסתרת תוויות השורות: הסתרה של תוויות השורות בכל שכבת-על ברשת.
• הצגה של מספרי שורות: הצגה של מספרי השורות בכל שכבת-על ברשת (נבחרת כברירת מחדל).
• Show line name: הצגת שמות השורות בכל שכבת-על של רשת, במקרה של רשתות עם שמות קווים.

b. תיבות סימון עם אפשרויות בתוך:

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

נבחן את ההגדרות האלה לעומק.

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

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

הסתרת תוויות השורות

בוחרים באפשרות הסתרת תוויות השורות כדי להסתיר את מספרי השורות.

הצגת שמות השורות

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

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

הצגת גדלים של טראקים

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

כלי הפיתוח יציגו את [authored size] - [computed size] בכל תווית שורה: גודל Authored: הגודל שהוגדר בגיליון הסגנונות (הושמט אם לא הוגדר). גודל מחושב: הגודל בפועל במסך.

בהדגמה הזו, גודלי העמודות של snack-box מוגדרים ב-CSS grid-template-columns:1fr 2fr;. לכן, תוויות השורות של העמודות מציגות גם גדלים מחושבים וגם גדלים מחושבים: 1fr - 96.66px ו-2fr - 193.32px.

תוויות השורות של השורות מציגות רק גדלים מחושבים: 80px ו-80px כי לא הוגדרו גדלים של שורות בגיליון הסגנונות.

הצגת שמות האזורים

כדי להציג את שמות האזורים, מפעילים את תיבת הסימון הצגה של שמות האזורים. בדוגמה הזו יש שלושה אזורים ברשת – top, bottom1 ו-bottom2.

הארכת קווי רשת

מסמנים את התיבה Extend Grid lines כדי להרחיב את קווי הרשת עד לקצה אזור התצוגה לאורך כל ציר.

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

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

הפעלת תצוגות שכבת-על של רשתות מרובות

ניתן להפעיל תצוגות של שכבות-על במספר רשתות. בדוגמה הזו הופעלו שתי שכבות-על ברשת – main ו-div.snack-box, וכל אחת מהן מיוצגת בצבעים שונים.

התאמה אישית של צבע שכבת-העל ברשת

ניתן להתאים אישית כל צבע של שכבת-על ברשת על ידי לחיצה על בוחר הצבעים.

הדגשת הרשת

לוחצים על סמל ההדגשה כדי להדגיש מיד את רכיב ה-HTML, גוללים אליו בדף ובוחרים אותו בחלונית Elements.