לאיפה נעלם ה- CSS שלי?

image_66

בהתחלה, כשהתחלתי להישתמש ב- CSS, הייתי בן אדם מאוד מעוצבן. זה היה בימים הראשונים, כשרק התחילו להישתמש בו, ולא הבנתי דבר אחד – למה זה לא עובד? אני יוצר קובץ CSS, מחבר אותו לעמוד, אבל אני לא רואה שום שינויים בעיצוב! מה קורה פה?!

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

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

כאשר אתם מבצעים שינוי ב- CSS, אבל לא רואים את השינוי בעמוד, ענו של השאלות המנחות הבאות כדי למצוא מהי הבעיה:

1. האם הדפדפן משתמש ב- CSS שנמצא בזכרון המטמון?

בהרבה מיקרים, הבעיה היא שהדפדפן משתמש בקובץ מהזיכרון. גלישה לאתר משורת הכתובות, או אפילו לחיצה על כפתור F5 (Refresh) , לא תמיד יגרמו לו לקחת את הגירסה החדשה של הקובץ

כדי לפתור את הבעיה:

א. ליחצו Ctrl+F5 כדי להכריח את הדפדפן לטעון את ה- CSS מהשרת.

ב. נקו את זכרון הדפדפן.

2. האם הדפדפן מנסה להשיג את הקובץ?

לפעמים הדפדפן לא ינסה אפילו להשיג את הקובץ מהשרת. בשביל לאבחן בעיה זאת, השתמשו ב- Http Packet Sniffer כמו Fiddler, HttpWatch, או Network Monitoring Tab בתוך Firebug.

Packet Sniffers מאפשרים לכם לראות את כל הבקשות (והתשובות) שעוברות בין הדפדפן לשרת שלכם. ככה זה נראה ב- FireBug :

FireBug Network Monitoring Tab CSS

אם אתם לא רואים את הקובץ פה, אז יש רק סיבה אחת:

א. ההפניה לקובץ ה- CSS לא כתובה טוב (או לא קיימת) . הסתכלו על קוד המקור שמגיע לדפדפן (לחיצה ימנית במקום ריק בעמוד ו- View Source)  בדקו שהיא רשומה בצורה הבאה (שימו לב ל- type="text/css”):

<link rel="stylesheet" href="http://www.website.com/style.css" type="text/css">

3. האם הוא מצליח בכך?

אם הדפדפן מנסה להשיג את הקובץ, אבל נכשל, זה יכול לקרות ממספר סיבות:

א. הכתובת שגויה. הסתכלו (ברשימה למעלה) על הכתובת שממנה הדפדפן מנסה להשיג את הקובץ; אם היא מופיעה באדום (קוד תשובה 404) – או שיש לכם שגיאת איות, או שיש לכם בעיה עם כתובת יחסית. טיפ: נסו קודם כל עם כתובת מוחלטת.

ב. ביחנו את קודי התשובה (Response Code). במקרה של 401 יכול להיות שאין לכם הרשאה לגשת לקובץ. תנו הרשאת "Anonymous" לספריה (באמצעות IIS Manager) והרשאת קריאה לכולם (Everyone) ב- NTFS. (דבר זה גם יעזור לביצועים). לרשימה המלאה של קודי השגיאה לחצו כאן.

ג. בעזרת הסניפר, הסתכלו על התוכן של המסמך שחוזר (ב- FireBug לחצו על הפלוס ועברו לטאב Response), וודאו שאתם רואים את הגירסה המעודכנת ביותר.

FireBug Network Monitroing Tab Response

4. האם הקובץ נטען לזיכרון?

 

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

א. ב- Firebug, גשו לטאב CSS ואתרו את הקובץ. וודאו היטב שהתוכן שלו תואם את הקובץ המקורי. רק מנקודה זו אתם יכולים להיות בטוחים שהאתר משתמש במחלקות (Classes) שלכם. פנוקציונליות דומה תוכלו לראות באינטרנט אקספלורר באמצעות  IE Developer Bar:

IE Developer Bar CSS Tab

ב. מספר מחלקות יכולות להיות חסרות – מה שאומר שהדפדפן לא טען אותן. דבר זה יכול לקרות בגלל בעיית תחביר (Syntax) בקוד של המחלקה (לדוגמה סוגר מסולסל חסר), או שם לא טוב (למספר דפדפנים יש בעיות עם שמות מחלקות שמתחילים ב- "_", לדוגמה).

Firefox FireBug CSS Tab

5. האם הסלקטורים מוצאים את האלמנטים?

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

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

א. השתמשו בפקודת Inspect ב- Firebug או ב- IE Developer toolbar וליחצו על האלמנט הבעייתי. ברשימה בצד ימין אתם אמורים לראות את כול הסטיילים שחלים עליו. וודאו שהסטייל שלכם נמצא שם עם הערכים הנכונים.

ב. אצל חלק מהדפדפנים, השמות של המחלקות הם תלויי-ראשית (Case Sensitive), מה שיכול לגרום לבעיות. ככלל אצבע, תמיד השתמשו באותיות רגילות כשאתם נותנים שמות למחלקות (הפרידו עם "_").

IE Developer Toolbar Inspect CSS

6. האם משהו אחר רומס את המחלקה שלכם?

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

א. באמצעות Firebug או ב- IE Developer toolbar וודאו שאין מחלקות אחרות שדורסות את המחלקות שלכם – הן יופיעו עם קו באמצע:

IE Develoepr toolbar Style CSS Override

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

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

CSS ninja style class shirt

שתפו את הפוסט:
תגיות: ,

זכויות יוצרים

cc88x31 תכני הבלוג המקוריים חופשיים לשימוש תחת רשיון Creative Commons מסוג ייחוס-שיתוף זהה (CC-by-share alike) (הרשיון באנגלית, עברית), אלא אם צוין אחרת.

התגובות המתפרסמות בבלוג חופשיות גם הן לשימוש תחת רשיון Creative Commons מסוג ייחוס-שיתוף זהה (CC-by-share alike). אם אינכם מעוניינים שתגובותיכם יקבלו רשיון זה – אל תגיבו כאן.

תכני הבלוג הלא-מקוריים מופיעים כאן ברשות או בשימוש הוגן.

השארו מעודכנים

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

RSS Feed RSS - פוסטים RSS Feed RSS - תגובות

אודות האתר

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

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