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

Jecelyn Yeen
Jecelyn Yeen

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

סקירה כללית

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

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

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

  1. פותחים דף אינטרנט כלשהו, כמו הדף הזה.
  2. פותחים את כלי הפיתוח.
  3. בוחרים באפשרות עוד. התאמה אישית ושליטה בכלי הפיתוח > כלים נוספים > סקירה כללית של שירותי CSS.

    האפשרות 'סקירה כללית של CSS' בתפריט.

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

    הצגת הפקודה CSS Overview בתפריט Command.

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

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

    צילום סקירה כללית של שירות CSS.

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

    ניקוי הסקירה הכללית.

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

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

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

    צבעים.

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

    רשימה של רכיבים בצבע.

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

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

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

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

    פרטי הגופן.

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

    הצהרות שלא בשימוש.

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

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

    שאילתות מדיה.