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;	
}

This is very nice div

בהנחה שאתם משתמשים בדפדפן אינטרנט נורמלי (פיירפוקס, כרום, אופרה, ספארי) אתם תראו פינות עגולות. אך לרוע מזלם של כלל מפתחי האינטרנט, חלק נכבד מהגולשים עדיין משתמשים באינטרנט אקספלורר 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 הבא:

Look Ma! gradient, round corners and shadows with CSS3 and Internet Explorer!!!

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

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


#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 }

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

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (1 הצבעות, ממוצע: 3.00 מתוך 5)


אל תשארו מאחור! יש עוד מה ללמוד!

הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

רן בר-זיק

רן בר-זיקכותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
ניתן ליצור איתי קשר באמצעות:
כתובת המייל שלי: info@internet-israel.com.
פרופיל הלינקדאין שלי

הטוויטר שלי

פרופיל הפייסבוק שלי

אני תמיד שמח לייעץ ולעזור, אך בשל עומס הפניות הרב, אני לא תמיד מצליח לענות במהירות.