1. מבוא
לכלי הפיתוח יש עכשיו תמיכה טובה יותר בניפוי באגים ברשת CSS!
כשמחילים רכיב HTML בדף על display: grid או display: inline-grid, על חלונית הרכיבים יש מספר אפשרויות שיעזרו לכם לבדוק טוב יותר את רשת המשבצות.
מה'לי תלמדו
קוד Lab זה ילמד אתכם לנפות באגים ברשת CSS באמצעות כלי הפיתוח של Chrome.
- איך להחליף מצב של ניפוי באגים ברשת מחלונית הרכיבים
- איך להתאים אישית את הגדרות שכבת-העל של הרשת בחלונית הפריסה
- כיצד לערוך את הסגנונות בעזרת שכבות-על של רשתות
מה צריך להשתמש בו
- מחשב פעיל ו-Wi-Fi ניתן למימוש
- Chrome מגרסה 87 ואילך.
- [אופציונלי] הבנה בסיסית של רשת CSS.
מה תעשו
אפשר לפתור את הבעיה הזו בעזרת הכלים לניפוי באגים ברשת CSS.
2. התחלה
לוחצים על הקישור הבא כדי לפתוח את דף החשיבה:
לאחר מכן, בדף החשיבה, פותחים את כלי הפיתוח של Chrome.
3. הפעלת שכבת העל ברשת
בודקים את המשחק בחלונית רכיבים. לוחצים על הצומת של מאגר חשיבה ומתמקדים בו:
<div class="chrome-puzzle">
בחלונית רכיבים, חשוב לשים לב שיש תג grid לצד מאגר התגים של Google Play. לוחצים עליו כדי להפעיל או להשבית את שכבת-העל של הרשת.
הסרטון הזה מדגים איך להשלים את השלבים שלמעלה.
4. התאמה אישית של תצוגת שכבת העל ברשת
בשלב זה, שכבת-העל של הרשת מוצגת עם מספרי השורות. התאמה אישית של התצוגה כדי לעזור לנו לפתור את הבעיה.
לוחצים על החלונית פריסה, ובוחרים באפשרות הסתרת תוויות השורה בתפריט הנפתח כדי להסתיר את מספרי השורות בשכבת העל ברשת.
עכשיו עוברים לחלונית סגנונות, ובוחנים את ה-CSS של מאגר החשיבה. הוא מכיל נכס grid-template-areas:
.chrome-puzzle {
grid-template-areas:
"top-left top-right"
"bottom-left bottom-right";
}
שמות האזורים יעזרו לנו לפתור את הבעיה! יש לעדכן את ההגדרות כדי להציג אותן במסך.
חוזרים לחלונית פריסה ומפעילים את תיבת הסימון הצגת שמות האזורים.
טה-דה! שכבת-העל של הרשת מציגה עכשיו את שמות האזורים של כל אחד מהם.
הסרטון הזה מדגים איך להשלים את השלבים שלמעלה.
5. משחקי חשיבה
כששמות האזורים מוצגים במסך, אנחנו יכולים להתחיל לעבוד על המשחק.
מציבים את כל חלקי החשיבה באזור הנכון.
אנחנו יכולים להתחיל עם בדיקה של משחק החשיבה הראשון.
<img src="...-grid-4.png" class="piece-4">
בחלונית סגנונות, מאתרים את מחלקת ה-CSS של הקטע:
.piece-4 {
grid-area: auto;
}
ה-grid-area מוגדר כרגע ל-auto. אפשר לעדכן את השם הזה עם שם האזור הנכון.
לאיזה אזור משתייך הקטע הזה? נניח שהאזור הנכון בקטע הזה הוא top-right, ולאחר מכן אפשר להחליף את הערך auto ב-top-right. הצגה חזותית של השינויים באופן מיידי. הפריט נמצא עכשיו באזור top-right.
הסרטון הזה מדגים איך להשלים את השלבים שלמעלה.
צריך לעדכן את grid-area בכל תמונה עד לסיום המשחק!
6. מעולה!
מעולה! השלמת את מעבדת הקוד הזו!
הנה התיעוד אם ברצונך לקבל מידע נוסף על כלי ניפוי הבאגים ברשת CSS.