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