זה לא אני, זה אתה. או: חרק בתוך שועל האש!

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

לאחרונה נתקלתי בסיטואציה די מפתיעה מבחינתי: צורך להציג CSS מיוחד אך ורק לפיירפוקס.
למה מפתיעה אתם שואלים? כי בד”כ אני משתדל לכתוב קוד ע”פ סטנדרטים, ובמקרה כזה לרוב אקספלורר הוא זה שצריך טיפול מיוחד (אותו הוא מקבל באמצעות שילוב של css hacks ו conditional comments).
הפעם נתקלתי בבעיה מאוד מעצבנת שמקורה בבאג של פיירפוקס עד גרסה 3 לא כולל:
נגיד שרוצים לעשות horizontal menu באמצעות ul list. לכאורה אין שום בעיה (עושים display:inline ל LI). ובאנגלית באמת אין בעיה.
אבל כשאנחנו כותבים בעברית ומוסיפים padding ל LI הוא מתווסף רק בצד ימין.
כל כך מעצבן! צילומי מסך:

בעברית:

באנגלית:

רואים איך הפריטים בעברית מצטופפים בצד שמאל וכל ה padding שלהם עבר ימינה? ובכן הפעם פיירפוקס טועה וכולם צודקים (ספארי, אופרה ואפילו אקספלורר האקס).
אז מה עושים? יש שתי אפשרויות:
1. בונים את זה אחרת לגמרי (למשל באמצעות float:right) בצורה שתעבוד בכל דפדפן.
2. מגישים CSS אחר לשועל האש הסורר.
לרוב הייתי הולך על האופציה הראשונה. אבל הפעם, כיוון שמדובר בבאג של פיירפוקס, וכיוון שהאופציה הראשונה מוסיפה סרבול מיותר לחלוטין, בחרתי באפשרות השנייה.
איך גורמים לשועל לראות משהו אחר לגמרי? רוב ה hacks כאמור מיועדים או רק לאקספלורר, או רק ל”דפדפנים טובים”. במקרה שלנו פיירפוקס היה ילד רע ולכן אף אופציה לא מתאימה. אנו צריכים משהו שרק הוא יראה.
אז אחרי הקדמה ארוכה קבלו את התשובה (צילום מסך בגלל אנגלית הפוכה):

הפתרון מתבסס על שימוש באלמנט שיש רק בפיירפוקס: , כאשר ה-x יכול להיות כל אלמנט HTML, כמן A או TD. כל דפדפן אחר לא יבין את הכלל הנ”ל ויזרוק אותו לפח ה CSS הפרטי שלו.
כיוון שפיירפוקס 3 כאמור כבר תיקן את הבאג, אנחנו צריכים לשחזר את מה שדרסנו. זה נעשה ע”י אלמנט שיש רק בפיירפוקס 3: .
אם כן, יש גאולה.

אתם בטח רוצים לדעת אילו כללי CSS שמתי שם. פשוט מאוד. לפיירפוקס 2 שמתי float:left ולפיירפוקס 3 float:none. זהו.

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

שימו לב שזה מתוך ה cache של גוגל כי הפילטר של אורט לא נתן לי להגיע לכתובת המקורית של האתר:
http://pornel.net/firefoxhack (ארבע אותיות ראשונות בעייתיות)

מקווה שנהנתם ולמדתם משהו שימושי.

סרג’