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

פינות מעוגלות, gradient וצלליות הם דברים שקיימים בתקן CSS3 ועכשיו, הודות ל-PIE, גם באקספלורר

מאז ומתמיד היתה נטושה מלחמת עולם בין המעצבים, חובבי הפינות המעוגלות, ה-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 }

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

פוסטים נוספים שכדאי לקרוא

DALL·E 2023-10-21 22.28.58 - Photo of a computer server room with red warning lights flashing, indicating a potential cyber threat. Multiple screens display graphs showing a sudde
יסודות בתכנות

מבוא לאבטחת מידע: IDOR

הסבר על התקפה אהובה ומוצלחת שבאמצעותה שואבים מידע מאתרים

בינה מלאכותית

להריץ ממשק של open-webui על הרספברי פיי

להפעיל ממשק של צ׳אט ג׳יפיטי שאפשר לגשת אליו מכל מחשב ברשת הביתית על רספברי פיי עם מודל בשם tinydolphin שרץ על רספברי פיי.

גלילה לראש העמוד