CSS3 באינטרנט אקספלורר

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

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

#haviv {
	-webkit-border-radius: 13px;
        -moz-border-radius: 13px;
        border-radius: 13px;
	background-color: red;
	padding: 20px;
	height: 100px;
	width: 200px;	
}

בהנחה שאתם משתמשים בדפדפן אינטרנט נורמלי (פיירפוקס, כרום, אופרה, ספארי) אתם תראו פינות עגולות. אך לרוע מזלם של כלל מפתחי האינטרנט, חלק נכבד מהגולשים עדיין משתמשים באינטרנט אקספלורר 6,7,8 שכמובן אף אחד מהם לא תומך בסטנדרטים כמו שצריך ולא בתגיות CSS3. אם אתם משתמשים באקספלורר כדי לראות את הדף הזה – אתם תראו את ה-div החביב עם פינות מרובעות.

אבל בדיוק בשביל זה נוצר PIE שראשי התיבות שלו הן progressive internet explorer (כן, אני מודע לאירוניה). ובאמצעות HTC מאפשר גם לאינטרנט אקספלורר 6,7 ו-8 להציג כמה מאפייני CSS3 שנכון לעכשיו הם:

border-radius
box-shadow
border-image
multiple background images
linear-gradient background images

בניגוד לפתרונות אחרים – השימוש ב-PIE הוא פשוט, נעים ומאד קל. מורידים את pie.htc מהאתר ושמים אותו היכן שקובץ ה-css שלכם נמצא. כותבים את ה-CSS3 ומוסיפים את התכונה הבאה לאלמנט שאליו הוספנו את ה-CSS3:

behavior: url(PIE.htc);

ו… זהו!

הכל פשוט יותר עם דוגמא, שימו לב ל-div הבא:

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

מחקו את החיוך מהפרצוף ושימו לב איך עשיתי את זה:

#myBox {
        border: 1px solid #696;
        padding: 60px 0;
        text-align: center;
        width: 200px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow: #666 0px 2px 3px;
        -moz-box-shadow: #666 0px 2px 3px;
        box-shadow: #666 0px 2px 3px;
        background: #EEFF99;background:
        -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
        background: -moz-linear-gradient(#EEFF99, #66EE33);
        -pie-background: linear-gradient(#EEFF99, #66EE33);
        behavior: url(PIE.htc);
}

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

הערה חשובה: במידה וזה לא עובד לכם מסיבה מסוימת, שימו נתיב מדויק ב-behavior. אבל זה עובד במאה אחוזים מהזמן.

הערה חשובה לאתרים שמשתמשים בעברית

שלומי צדוק מדווח על כך שיש קושי להשתמש ב-CSS3 PIE עם direction: rtl. הפתרון הוא להוסיף את הקוד הבא ל-CSS:

css3-container { direction: ltr !important }

וזה אמור לפתור את העניין לאתרים ישראלים.