תבניות, HTML ודפדפנים שונים #1
מאת חנית כהן | נשלח 24.10.2006 | נושאים מדריכים, מחשבים, תבניות
למרות העדפתי לשועל, הטענות הן שעדיין IE הוא ברירת המחדל של הגולש הממוצע (הסטטיסטיקות אצלי, אגב, שונות).
ועל כן כשאני מעברתת תבניות או עושה כל עבודת כתיבת אתרים אחרת אני משתדלת לבדוק בכל הדפדפנים הרלוונטיים.
כפי שידוע לכל כותב אתרים מתחיל, ה IE אינו תומך בסטנדרטים של עיצוב אתרים, ועל כן דף תקין לא בהכרח ייראה באותה צורה ב IE ובשועל, לדוגמה הסרגל הצדדי שלי נראה כמעט לבן ב-IE למרות שהוא למעשה כחלחל…
לפעמים ניתן לפתור את בעיות התאימות בקלות יחסית על ידי שינוי העיצוב עצמו, ולפעמים צריך טריקים מכוערים מתוחכמים יותר.
טבלת הפילטרים של קוין סמית היא השלב הראשון והחשוב ביישום הטריקים האלו…
כמה דוגמאות יישימות:
אלמנטים קטנים יותר ב IE
ל-IE יש בעיות עם מודל הקופסא, בעיות אלו עלולות לגרום לחלקים מהדף להיות צרים יותר ב IE.
למשל המבנה הבא:
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 30em
}
בעקרון רוחבו של המבנה הוא 50em : תוכן - 30, מסגרת - 2, דיפון - 8, וגבולות - 10.
מאידך, ב IE המסגרת והדיפון נכללים בתוך גודל התוכן ולא מוספים אליו, מה שאומר שגודל התוכן הוא למעשה 20em (מסגרת+דיפון בכל צד), ולכן רוחבו של הdiv הוא רק 40em.
כל עיצוב שהסתמך על גודלו של העימוד לא יראה טוב בעל כל הדפדפנים.
במקרה כזה אנחנו צריכים עיצוב שיתקן את הבעיה עבור כל הגרסאות של IE, על מנת לשמר את העיצוב נשתמש בהאק על IE.
מבט מהיר בטבלה מראה ש IE לא יודע להתמודד עם סגנון html>body, ולכן נשתמש בו.
התיקון שלנו ייראה כך:
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 40em
}
html>body div {
width: 30em
}
שימו לב לתגית השניה, אותה בעצם כל הדפדפנים התקינים קוראים ומפרשים נכון (ועל כן מתקנים את ערך ה width) אבל IE אינו קורא ולכן נשאר עם הערך הראשוני. כתוצאה מהתיקון בכל הדפדפנים רוחבו של המבנה הוא 50em.
המשך - בימים הקרובים.
נהניתם מהפוסט ? כדאי להרשם לעדכוני RSS ולקבל הכל ישירות.
שמי חנית כהן, אני בת 32 ואשת מחשבים משנת 93.
יפה.
נחמד שאת משנה את התבנית של הבלוג לעיתים קרובות.
האמת, אני משתמש בIE7, והבלוג שלך נראה אחלה. התפריט הצדדי כחלחל כראוי.
שחר.
גלעד: תודה.
שחר: האמת, לא בדקתי ב IE7.
אני רוצה להתקין אותו כ-standalone, כדי לשמר את יכולות הבדיקה שלי מול IE6.
אבל מראש הטענה הייתה שגירסת 7 הרבה יותר תומכת בסטנדרטים (מה שניתן לראות גם מהטבלה שהזכרתי בפוסט עצמו.
יש גירסת standalone ל-IE7?
תמשיכי, תמשיכי - הטריקים האלה שאני לא יודעת מונעים ממני לפרסם תבניות שאני מתרגמת מפני שאני לא יודעת לתקן את הגליצ’ים הקטנים..
לא רש שיש, תציצי בפוסט הבא ותראי איך מתקינים
זה ממש עזר לי עכשיו במשהו, הפוסט הזה.
את חייבת להמשיך לכתוב אותם.
השארת תגובה