ביליתי מספר שעות במיון מאמרי ה-CSS שהותקפתי בהם. רובם המכריע היה מסוג “איך ליצור _______ מהמם בעזרת CSS בלבד!”, ולכן הם נסרקו על ידי בקלילות, ונשמרו ב-del.icio.us שלי בעזרת הטכניקה שתיארתי באותו מאמר.
חלקם היה לא רלוונטי, ולכן נמחק בשמחה רבה מהרשימה 🙂
לאחר המיון הזה, נותרתי עם 5 מאמרים שנראו לי חשובים.
הראשון הוא מאמר על CSS hacks (מורפיקס מתרגם את hack כפירצה, אבל “פירצות CSS” לא נשמע נחמד כל כך… אם למישהו יש רעיון אלטרנטיבי לתרגום, אשמח מאד). יש בו 7 נושאים שבהם לא היינו מסתדרים ללא hack-ים, אבל מתוכם אתמקד רק ב-4:
1) בעיית ה-Box model – הבעיה הידועה של הבדל בין IE6 לשאר הדפדפנים בהתחשבות ב-padding וה-border בחישוב גודל האלמנט : IE6 מחשיב אותם בתוך הגודל של האלמנט, והשאר- מחוצה לו. המאמר מפנה למאמר אחר המראה קוד CSS ה”מכריח” את IE6 להתנהג כמו שאר הדפדפנים. הוא משתמש לשם כך בבאג – IE6 מיישם גם ערכים של מאפיינים שהוגדרו יותר מאוחר שוב. כלומר, אם הגדרנו פעם את הגובה כ-700 px, ויותר מאוחר הגדרנו אותו כ-500px, אז IE יישם את -700, בעוד שכל שאר הדפדפנים יישמו את ה-500.
אני יודעת על טכניקה יותר חמודה בעיני לפתרון הבעיה:
-moz-box-sizing: padding-box . היא חמודה בעיני כי היא מובנת יותר, וגם כי היא לא מתבססת על באג: היא פונה למוזילה ואומרת לו – נא לחשב גדלים בצרוף ה-padding וה-border של האלמנטים. אני החיסרון היחיד שלה בעיני הוא שהיא מנציחה את ההתנהגות הלא נכונה של IE6…
2) הערות מותנות (Conditional comments) – כך מכניסים קוד מיוחד לכל דפדפן. יש כאלה שלא מתלהבים מהטכניקה הזו, דיברתי על זה פעם באחד הפוסטים שלי , מפני שיש כאן ערבוב של HTML עם CSS. אז אולי זו אינה טכניקה של לכתחילה, אלא של בדיעבד.
3) טכניקה לטיפול ב-min-width ו-max-width ב-IE. – שתי טכניקות להכריח את IE להתייחס ל-min ו-max.
4) המאמר הזה מסתיים בשיטה שבה מגישים לכל דפדפן רק את ה-CSS המתאים לו. למעשה, הם טוענים שבשפות server side רבות ניתן לזהות את סוג הדפדפן, ולפי הסוג להכניס ל-head תגית link המכילה הפניה ל-CSS המתאים. כך גם לא רואים לך את ה-hack, וגם אתה מגיש רק את ה-CSS הנדרש (וגם, לפעמים ה-hack-ים מונעים מהדף לעבור ולידציה).
חלקם היה לא רלוונטי, ולכן נמחק בשמחה רבה מהרשימה 🙂
לאחר המיון הזה, נותרתי עם 5 מאמרים שנראו לי חשובים.
הראשון הוא מאמר על CSS hacks (מורפיקס מתרגם את hack כפירצה, אבל “פירצות CSS” לא נשמע נחמד כל כך… אם למישהו יש רעיון אלטרנטיבי לתרגום, אשמח מאד). יש בו 7 נושאים שבהם לא היינו מסתדרים ללא hack-ים, אבל מתוכם אתמקד רק ב-4:
1) בעיית ה-Box model – הבעיה הידועה של הבדל בין IE6 לשאר הדפדפנים בהתחשבות ב-padding וה-border בחישוב גודל האלמנט : IE6 מחשיב אותם בתוך הגודל של האלמנט, והשאר- מחוצה לו. המאמר מפנה למאמר אחר המראה קוד CSS ה”מכריח” את IE6 להתנהג כמו שאר הדפדפנים. הוא משתמש לשם כך בבאג – IE6 מיישם גם ערכים של מאפיינים שהוגדרו יותר מאוחר שוב. כלומר, אם הגדרנו פעם את הגובה כ-700 px, ויותר מאוחר הגדרנו אותו כ-500px, אז IE יישם את -700, בעוד שכל שאר הדפדפנים יישמו את ה-500.
אני יודעת על טכניקה יותר חמודה בעיני לפתרון הבעיה:
-moz-box-sizing: padding-box . היא חמודה בעיני כי היא מובנת יותר, וגם כי היא לא מתבססת על באג: היא פונה למוזילה ואומרת לו – נא לחשב גדלים בצרוף ה-padding וה-border של האלמנטים. אני החיסרון היחיד שלה בעיני הוא שהיא מנציחה את ההתנהגות הלא נכונה של IE6…
2) הערות מותנות (Conditional comments) – כך מכניסים קוד מיוחד לכל דפדפן. יש כאלה שלא מתלהבים מהטכניקה הזו, דיברתי על זה פעם באחד הפוסטים שלי , מפני שיש כאן ערבוב של HTML עם CSS. אז אולי זו אינה טכניקה של לכתחילה, אלא של בדיעבד.
3) טכניקה לטיפול ב-min-width ו-max-width ב-IE. – שתי טכניקות להכריח את IE להתייחס ל-min ו-max.
4) המאמר הזה מסתיים בשיטה שבה מגישים לכל דפדפן רק את ה-CSS המתאים לו. למעשה, הם טוענים שבשפות server side רבות ניתן לזהות את סוג הדפדפן, ולפי הסוג להכניס ל-head תגית link המכילה הפניה ל-CSS המתאים. כך גם לא רואים לך את ה-hack, וגם אתה מגיש רק את ה-CSS הנדרש (וגם, לפעמים ה-hack-ים מונעים מהדף לעבור ולידציה).
כמה הערות קטנות
הקטע עם box sizing הוא באמת יותר נחמד. הבעיה איתו שכרגע רק מוזילה מממש את זה ולכן זה לא יעבוד בשום דפדפן אחר זה גם לא css ולידי. לכן לא בטוח שהוא יותר טוב מ hack שעובר ולידציה. למעשה בכלל לא צריך להשתמש בזה אלא אם כן עובדים ב quirksmode או אם תומכים ב ie5.5. כי החל מ ie6 אפשר פשוט לעבוד ב doctype סטנדרטי ואז הבעיה נפתרת.
הדבר השני זה לגבי browser sniffing: זה לא חדש שהטכניקה הזאת נחשבת לא משהו, והסיבה היא שהיא מסתמכת על ה user agent string ולא על התנהגות או פיצ’ר שספציפי לדפדפן מסוים. בגלל זה עדיף לדעתי להשתמש ב conditional comments ולהגיש css נפרד ל ie. כי זה פיצ’ר מובטח ע”י מייקרוסופט. בדיוק כמו הבאגים שלה שמאפשרים את ה css hacks. לעומת ה string יכול להשתנות ואז צריך לשנות את קוד השרת, שזה דבר פחות נחמד ברוב המקרים.. לדוגמה (ויש הרבה תגובות במאמר על זה) הדפדפן opera שינה את ה string שלו כך שיכיל את כל שמות הדפדפנים שיש בשוק. שיטה שנשברת כל כך בקלות היא לא כל כך טובה לדעתי.
תודה על הערותיך המאירות