סקירה כללית של שירות CSS: זיהוי שיפורים אפשריים בשירות ה-CSS

Jecelyn Yeen

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

סקירה כללית

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

בקישורים הבאים תוכלו ללמוד איך להפעיל ולהפעיל מחדש דוח סקירה כללית של CSS והסבר על הדוח 'סקירה כללית של CSS'.

פתיחת החלונית 'סקירה כללית של CSS'

1. פותחים דף אינטרנט כלשהו, כמו הדף הזה.
2. פותחים את כלי הפיתוח.

3. בוחרים באפשרות התאמה אישית ושליטה בכלי הפיתוח > כלים נוספים > סקירה כללית של שירותי CSS.

   

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

   

הרצה והרצה מחדש של דוח סקירה כללית של שירות CSS

1. לוחצים על הלחצן צילום סקירה כללית כדי ליצור דוח סקירה כללית של CSS על הדף שלכם.

   

2. כדי להריץ מחדש סקירה כללית של CSS, לוחצים על הסמל ניקוי הסקירה הכללית וחוזרים על השלב הראשון.

   

הסבר על הדוח 'סקירה כללית של שירותי CSS'

הדוח מורכב מחמישה קטעים:

1. סיכום סקירה כללית. סיכום ברמה גבוהה של ה-CSS של הדף.

2. צבעים. כל הצבעים בדף. הצבעים מקובצים לפי סוגים, כגון צבעי רקע, צבעי טקסט וכו'. בקטעים האלה מוצגים גם טקסטים עם בעיות ניגודיות נמוכה.

   

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

   

   כדי להדגיש את הרכיב בדף, מעבירים את העכבר מעל הרכיב ברשימה.

   

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

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

   

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

   

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

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