אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » CSS3 באינטרנט אקספלורר

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

רן בר-זיק יולי 14, 2010 1:21 pm אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
עיצוב פתרונות

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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