כיצד להשתמש בעוגה CSS3 כדי לחדש את

אחת הדילמות הגדולות ביותר בפני מפתחי אינטרנט היא חוסר תאימות של גירסאות שונות של Internet Explorer עם תקני האינטרנט הנוכחיים. למרות שמיקרוסופט הבטיחה CSS3 ואפילו תמיכה ב- HTML5 עבור IE9, משתמשי Windows, במיוחד עסקים, עשויים להמשיך להשתמש ב- IE8, ב- IE7, או אפילו ב- IE6 המפחיד במשך שנים רבות.

כתוצאה מכך, קידוד של אתר עם תכונות CSS3 בלעדיות ירחיק רק חלק גדול ממבקרי האתר שלך, ויחייב אותם להוריד דפדפן תואם לתקנים, כמו Mozilla Firefox או Google Chrome, יהווה רק יהיר.

פתרון אפשרי לבעיה הוא להשתמש במודרניזציה, שהוא סקריפט או יישום שמשתמש במגוון של טריקים כדי להפוך את האתר שלך להופיע כפי שהוא צריך בכל הדפדפנים. CSS3 Pie הוא מבוסס JavaScript מודרני מבוסס המסייע Internet Explorer לזהות תכונות CSS3 מגניב כגון פינות מעוגלות, צללים רכים ירידה, ומילוי מילוי. זה מהיר, קל, ועובד רוב הזמן עם tweaking מעט מאוד.

התקנה והתקנה

הדרכה קצרה זו מניחה שכבר יש לך אתר עם אלמנטים CSS3. על מנת לקבל CSS3 Pie עובד, אתה צריך לעשות שני דברים: להעלות את חבילת JavaScript ולהוסיף קוד מיוחד לקובץ CSS שלך.

1. ההורדה של האתר css3pie.com כולל מספר קבצים, אבל אם הכל הולך כמתוכנן, כל מה שאתה צריך זה PIE.htc, שהוא קובץ טקסט דחוס. העלה אותו למקום בשרת האינטרנט שבו קובץ ה- CSS שלך יכול לגשת אליו.

2. פתח את קובץ ה- CSS בעורך הטקסט שלך ומצא את האלמנטים המכילים מאפייני CSS3. בתוך רכיבים אלה, הוסף את הכלל הבא:

 התנהגות: כתובת אתר (PIE.htc); 

הנתיב לקובץ PIE.htc שלך צריך להיות מדויק, כך שאם הוא לא נמצא באותה ספרייה כמו קובץ ה- CSS שלך, לשנות את זה בהתאם.

האלמנט הסופי צריך להיראות כך:

 # element1 {border: 1px solid # 696; ריפוד: 60px 0; text-align: center; רוחב: 200px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; רקע: # EEFF99; התנהגות: כתובת אתר (PIE.htc); } 

אם זה עבד כהלכה, אתה צריך לראות את התוצאות IE 6, 7, ו 8 מיד לאחר העלאת קובץ CSS שונה.

פתרון תקלות

אם אינך רואה שינויים כלל, סביר מאוד שתצטרך להתאים את הנתיב ל- PIE.htc או אפילו להשתמש בכתובת האתר המלאה. רק תזכור כי IE יקבל רק קובץ htc מאותו תחום כמו האתר, ו "www.site.com" ו "site.com" נחשבים שני תחומים שונים.

בנסיבות מסוימות, ייתכן שיהיה עליך לנסות PIE_uncompressed.htc או אפילו PIE.php כדי לקבל את זה כדי לעבוד כראוי. עיין בתיעוד לקבלת פרטים נוספים.

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

השילוב של CSS3 Pie וכמה פונקציות jQuery נראה לייצר שגיאה ב- IE. לא מצאתי פתרון עבור זה, אבל הדף עדיין נטען ומציג כראוי למרות זאת.

מוֹדֶרנִיזָצִיָה

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