במפגש מפתחי דרופל שנערך בתיכון בליך בחודש אוגוסט האחרון, הרצה תום מחברת הינביט על התאמת עיצובים לאקספלורר. לאחר ההרצאה סייע תום בהתאמת גרלנד 6 לאקספלורר.
להלן סיכום הדברים שרשמתי במהלך ההרצאה, בתוספת מספר קישורים להרחבה.
באופן כללי מומלץ להתחיל לפתח את העיצוב על פיירפוקס - שם יש לנו הכי הרבה כלי debug. לאחר סיום הפיתוח בפיירפוקס, נטפל בהתאמת העיצוב לאקספלורר.
באופן כללי ישנן שלוש גישות לנושא התאמת עיצובים לאקספלורר:
א. לדחוף hacks ל-CSS. לכל אלמנט לדחוף hacks ספציפיים משלו.
ב. לשים את הכל בסוף קובץ ה-CSS (יותר מהיר ויותר מודולרי).
ג. לשים את כל ההגדרות בקובץ CSS נפרד ולהשתמש ב-explorer conditional comments (שאותן מבינים רק דפדפני אקספלורר לסוגיהם). גישה זו מומלצת במיוחד אם האתר צריך לעבור ולידציה להתאמתו ל-w3c.
תום משתמש רק בארבעה hacks ספציפיים:
א. ניצול כללי CSS שמתאימים רק לאקספלורר.
רק אקספלורר 6 יכול לראות תכונות שמתחילות עם קו תחתון. תכונות שמתחילות עם כוכבית - ניתן לראות אותן באקספלורר 6 ומטה. ותכונות שמתחילות עם נקודה - גלויות בכל גירסאותת אקספלורר:
element {
_width: 20em; /* IE6 only */
*width: 20em; /* All IE versions until and including IE6 */
.width: 20em; /* This is only visible by IE6 and IE7 version - essentially all IE versions */
}
במידת הצורך, אפשר להוסיף תכונות אלו בתוך הערות מותנות.
קישורים להרחבה:
דוגמה בעברית איך התאמתי את nice menus לאקספלורר:
http://drupal.org.il/node/1484
הערות מותנות הן הערות שעובדות אק באקספלורר, ומתאימות מצויין כדי לתת לאקספלורר הנחיות ייעודיות.
http://www.quirksmode.org/css/condcom.html
וויקיפדיה - CSS Filters.
http://en.wikipedia.org/wiki/CSS_filter
אילו חוקים מתאימים לאילו דפדפנים - הטבלה המלאה:
http://centricle.com/ref/css/filters
ב. שינוי ה-LAYOUT.
להוסיף בהתחלת כל כלל CSS תכונה מיוחדת - ZOOM - שמיועדת רק לאקספלורר ומביאה אותו לעבור למצב layout mode.
הכלל הבא גורם לכל האלמנטים המוצגים המוגדרים בתוכו להיות מוצגים בתצוגת בלוק:
div, ol, ul, iframe {
zoom:1;
}
הערות:
* הכלל בטוח עובד לגבי div. האם הוא עובד גם לגבי ol, ul, ו-iframe? הדבר טעון בדיקה.
* זהו כלל גורף - והוא פותר בעיות רבות. לעיתים נצטרך למקד את הכלל ולהפעיל אותו רק לגבי אלמנטים ספציפיים.
ג. הכנסת javascript בתוך ה-CSS.
element {expression: <javascript code> }
אקספלורר מאפשר להכניס javascript בתור ה-CSS.
שימושים:
* להעלות קובץ HTC (סוג של קבצי סקריפט). יש לדוגמה סקריפט ספציפי שמסדר את נושא השקיפות (opacity) של קבצי png.
* לדמות min-width ו-min-height (לדוגמה - if width = 400 then). למרות שיש מישהו שהצליח לעשות זאת בלי expression.
ד. שימוש בפילטר png opacity.
במצב זה מוסיפים בדרך כלל גם אלמנטים של HTML לשיפור השקיפות.
להרחבה בנושא cross browser variable opacity, ראו: http://alistapart.com/stories/pngopacity (בפיירפוקס אפשר לעשות את הכל עם canvas).
למעשה ב-CSS לאקספלורר בסוף משתמשים בדרך כלל ב-GIF (יותר פשוט) או שעושים CSS נפרד עם תמונות נפרדות.
זיהוי הדפדפן ב-PHP
לפעמים, כדאי פשוט להשתמש בקוד PHP שונה לאקספלורר - וזה חוסך הרבה פיתולים מיותרים. הנה קוד דרופלי שמזהה את הדפדפן (וכן את מערכת ההפעלה והרבה פרמטרים אחרים). להורדת הגירסה העדכנית של ה-API שבו משתמש הקוד, גשו לכאן.
אמנון-מאיר לבב - ייעוץ משולב - סוף מעשה באפיון תחילה!
אפיון מיזמי אינטרנט, ליווי פרוייקטים בדרופל וייעוץ רב-תחומי
הסתרת סגנונות CSS מדפדפנים לפני IE7
הנה פתרון לכללים שיעבדו רק באקספלורר 7 ומעלה.
אמנון-מאיר לבב - ייעוץ משולב - סוף מעשה באפיון תחילה!
אפיון מיזמי אינטרנט, ליווי פרוייקטים בדרופל וייעוץ רב-תחומי
קוד CSS שיעבוד באקספלורר 7 בלבד
אם רוצים להכניס קוד CSS עבור אקספלורר 7 בלבד, לא 6 ולא 8, מה שעבד בשבילי זה להשתמש ב-conditional comments
<!--[if IE 7]><link rel=”stylesheet” type=”text/css”
href=”someFileName.css”>
<![endif]–>
מקור:
http://www.evotech.net/blog/2007/04/ie7-only-css-hacks/
אמנון-מאיר לבב - ייעוץ משולב - סוף מעשה באפיון תחילה!
אפיון מיזמי אינטרנט, ליווי פרוייקטים בדרופל וייעוץ רב-תחומי