Sofia Emelianova
האם אי פעם העליתם קובץ CSS לרכיב אבל הוא פשוט לא עבד?
בעזרת הכלים למפתחים של Chrome אפשר לזהות בעיות ב-CSS במבט מהיר, לנפות באגים ולבדוק אותן.
בסרטון הזה מוסבר איך בחלונית Elements > Styles מודגשות בעיות שונות ב-CSS:
נכס עם תחביר לא חוקי
נכס ששונה
נכס לא פעיל 
הועברה בירושה מ-
parent
נכס שעובר בירושה
מאפיין לא עובר בירושה
נכס קיצור דרך שניתן להרחבה 
נכס מפורט ששונה
נכס ידני פעיל
גיליון סגנונות של סוכן משתמש
- נכס שלא ניתן לעריכה
נכס שעבר שינוי והוא לא ניתן לעריכה
טיפים נוספים לניפוי באגים:
- משתמשים במסנן שבחלונית Styles (סגנונות) כדי להתמקד בנכס אחד שמעניין אתכם.
- בעזרת החלונית Computed אפשר לראות את כל הזוכים בCascade ואת הערכים המחושבים שלהם.
- בחלונית Computed, מרחיבים נכס ולוחצים על קישור כדי למצוא את המקור שלו בחלונית Styles.
מידע נוסף על כל הדרכים שבהן DevTools מדגיש בעיות ב-CSS זמין במאמר איתור רכיבי CSS לא חוקיים, רכיבים ששונו, רכיבים לא פעילים ורכיבי CSS אחרים.
כדי לשפר את המומחיות שלכם ב-CSS, כדאי לעיין במאמר לימוד CSS.
במאמר מידע על עיצוב רספונסיבי מוסבר איך יוצרים אתרים שנראים מצוין ומתפקדים היטב לכולם.