דרופל ישראל תשתיות תוכן קהילתיות פתוחות

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

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

באופן כללי ישנן שלוש גישות לנושא התאמת עיצובים לאקספלורר:
א. לדחוף hacks ל-CSS. לכל אלמנט לדחוף hacks ספציפיים משלו.
ב. לשים את הכל בסוף קובץ ה-CSS (יותר מהיר ויותר מודולרי).
ג. לשים את כל ההגדרות בקובץ CSS נפרד ולהשתמש ב-explorer conditional comments (שאותן מבינים רק דפדפני אקספלורר לסוגיהם). גישה זו מומלצת במיוחד אם האתר צריך לעבור ולידציה להתאמתו ל-w3c.

תום משתמש רק בארבעה hacks ספציפיים:

א. ניצול כללי CSS שמתאימים רק לאקספלורר.

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

במידת הצורך, אפשר להוסיף תכונות אלו בתוך הערות מותנות.

קישורים להרחבה:

דוגמה בעברית איך התאמתי את 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? הדבר טעון בדיקה.
* זהו כלל גורף - והוא פותר בעיות רבות. לעיתים נצטרך למקד את הכלל ולהפעיל אותו רק לגבי אלמנטים ספציפיים.

ג. הכנסת javascript בתוך ה-CSS.

אקספלורר מאפשר להכניס 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 נפרד עם תמונות נפרדות.