חיפוש שירות CSS לא חוקי, בוטל, לא פעיל ואחרים

Sofia Emelianova
Sofia Emelianova

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

בדיקת שירות ה-CSS שיצרת

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

הדבר הראשון שצריך לעשות הוא לבדוק את הרכיב ולוודא שה-CSS החדש אכן הוחל עליו.

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

הבנת CSS בחלונית 'סגנונות'

החלונית סגנונות מזהה סוגים רבים של בעיות ב-CSS ומדגישה אותם בדרכים שונות.

בוררים תואמים ושלא נמצאה להם התאמה

החלונית סגנונות מציגה בוררים תואמים בטקסט רגיל ובוררים שלא תואמים בטקסט בהיר.

בורר תואם בטקסט רגיל ובוררים ללא התאמה בטקסט בהיר.

הצהרות וערכים לא חוקיים

החלונית סגנונות מחוקה ומציגה סמלי אזהרה אזהרה. לצד אלה:

  • הצהרת CSS מלאה (נכס וערך) כשנכס ה-CSS לא תקין או לא ידוע.
  • רק הערך כשנכס ה-CSS חוקי, אבל הערך לא חוקי.

שם המאפיין לא תקין וערך המאפיין לא תקין.

בוטלה

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

בדוגמה הזו, מאפיין הסגנון width: 300px; ברכיב מבטל את width: 100% במחלקה .youtube.

לא פעיל

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

המאפיינים הבסיסיים האלה לא פעילים בגלל הלוגיקה של CSS, ולא בגלל הסדר המדורג.

הצהרת CSS לא פעילה עם רמז.

בדוגמה הזו, הנכס display: block; משבית את justify-content ואת align-items ששולטים בפריסות רשת גמישות או גמישות.

עוברות בירושה ולא עוברות בירושה

בחלונית סגנונות מוצגים מאפיינים בקטעי Inherited from <element-name> בהתאם לירושת ברירת המחדל שלהם:

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

דף הפרטים בקטע &#39;עובר בירושה מגוף&#39; עבר בירושה ושירות CSS שלא עבר בירושה.

קיצור דרך

מאפייני קיצור דרך (תמציתי) מאפשרים להגדיר כמה מאפייני CSS בו-זמנית, והם יכולים להפוך את גיליון הסגנונות לקריא יותר. עם זאת, בגלל האופי הקצר של נכסים כאלה, יכול להיות שתפספסו מאפיין ארוך (מדויק) שיעקוף מאפיין שמשתמע מקיצורים.

בחלונית סגנונות מוצגים מאפייני קיצורים כרשימות נפתחות של תפריט נפתח. שמכילות את כל המאפיינים המקוצרים.

נכס הקיצור עם רשימה נפתחת.

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

לא ניתנת לעריכה

בחלונית סגנונות מוצגים מאפיינים שלא ניתן לערוך בטקסט נטוי. לדוגמה, לא ניתן לערוך את שירות ה-CSS מהמקורות הבאים:

  • user agent stylesheet - ברירת המחדל של גיליון הסגנונות של Chrome.

    ה-CSS מגיליון הסגנונות של סוכן המשתמש.

  • מאפייני HTML הקשורים לסגנון ברכיב, לדוגמה, גובה, רוחב, צבע וכו'. תוכלו לערוך אותם בעץ ה-DOM וכך לעדכן את ה-CSS בחלונית סגנונות, אבל לא להיפך.

    בדוגמה הזו, המאפיין height="48" ברכיב <svg> מוגדר ל-50. הפעולה הזו תעדכן את המאפיין התואם בקטע svg[Attributes Style] בחלונית סגנונות.

בדיקת רכיב שעדיין לא מעוצב בסגנון שאתם חושבים עליו

כדי לנסות לאתר מה משתבש, כדאי לבדוק:

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

  • שירות CSS שנגזר מירושה
  • הזוכים בCascade
  • מאפייני לונג'נד (מדויק), לא מקוצר (תמציתי)
  • ערכים מחושבים, למשל font-size: 14px במקום font-size: 70%

הסבר על CSS בחלונית Computed

בחלונית Computed מוצגים גם נכסים שונים בצורה שונה.

הוצהר ועברו בירושה

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

נכסים מוצהרים.

כדי לראות את ההצהרה בחלונית סגנונות, מעבירים את העכבר מעל הנכס המורחב ולוחצים על לחצן החץ חץ ימינה..

לחצן החץ לצד הנכס.

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

הקישור לקובץ המקור.

בנכסים עם מספר מקורות, בחלונית Computed מוצג קודם הזוכה ב-Cascade.

נכס עם כמה מקורות.

משך

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

ערכי המאפיינים מחושבים בזמן הריצה.

בדוגמה הזו, Chrome חישב את הנתונים הבאים עבור הרכיב <ul>:

  • width, קרוב משפחה, ההורה שלו, <div>
  • height ביחס הצאצאים שלו, שני הרכיבים של <li>

לא עוברות בירושה ובהתאמה אישית

כדי שהחלונית Computed תציג את כל הנכסים והערכים שלהם, מסמנים את האפשרות תיבת סימון. Show all. כל הנכסים כוללים:

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

כל הנכסים מקובצים.

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

חיפוש כפילויות

כדי לחקור נכס ספציפי ואת הכפילויות הפוטנציאליות שלו, מקלידים את שם המאפיין בתיבת הטקסט Filter. אפשר לעשות את זה גם בחלוניות Styles ו-Computed.

תיבות הטקסט &#39;סינון&#39; בקטע &#39;סגנונות&#39; ו&#39;חלוניות מחושבים&#39;.

למידע נוסף, ראו חיפוש וסינון ב-CSS של רכיב.

חיפוש שירות CSS שאינו בשימוש

מידע נוסף מופיע בקטע כיסוי: איתור JavaScript ו-CSS שלא נמצאים בשימוש.