כך תתאימו את האתר שלכם ל-Internet Explorer

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

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

מצב זה נובע בכל העובדה שכל אחד מהדפדפנים הנפוצים בשוק, מרנדר את הקוד ממנו מורכב האתר. היות וכל אחד מהדפדפנים כולל בתוכו מנוע אחר – תדרשו להתאים קטעי CSS ספציפיים לדפדפנים שונים בהם נתקלתם בתצורה שונה מזו שביקשתם להציג לגולשים שלכם.

חשוב לציין כי ישנן לא מעט גרסאות של דפדפן האינטרנט Internet Explorer ובמקרה זה נציג לפניכם את הפתרון המהיר שיאפשר לכם לכתוב קוד CSS בסיסי שיותאם לכל הגרסאות הנפוצות של Internet Explorer.

התאמת האתר שלכם ל-Internet Explorer

פתחו את הדף אותו אתם מעוניינים להתאים לאינטרנט אקספלורר. בדוגמה הבאה פתחנו את קובץ Page.php הכולל את מבנה העמוד. מתוך הקוד שיופיע לפניכם העתיקו את שורה 5 ואת שורה 7 המתייחסות לקוד ה-CSS שתצרו לטעון בעמודים הרלוונטיים.

שורות אלו מגדירות לדפדפן כי במידה ומדובר בדפדפן Internet Explorer או Microsoft Edge עליו לטעון את קוד ה-CSS מקובץ שונה מקובץ ה-CSS המקורי.

שימו לב – בקובץ זה שם הקובץ בו יכתב קוד ה-CSS המותאם לאינטרנט אקספלורר הוא IE.css אבל תוכלו להגדיר כל קובץ שתרצו.

כעת, ניצור את קובץ ה-CSS המותאם לדפדפן Internet Explorer תחת השם IE.css. לשם כך תוכלו להשתמש בכל תוכנת עריכת קוד לפי נוחיותכם.

בקובץ החדש שיצרתם הקלידו את השורה הבאה ובין הסוגריים המסולסלים {} את כל קוד ה-CSS שתרצו להציג במידה ומדובר בדפדפן האינטרנט Internet Explorer.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  

}

שימו לב! במידה ואתם מעוניינים לעקוף קוד אחר שהקלדתם בנוגע לאותם אלמנטים בקוד אחר תוכלו להשתמש כמובן באפשרות important!

לאחר מכן שמרו את הקובץ והעלו אותו לתקייה שציינו בסעיף הקודם תחת הדומיין הראשי של האתר (תיקיית CSS)

זה הכל להפעם 🙂 

 

 

 

 

 

 

 

אהבתם? שתפו...Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter