important in css not only for hacking IE
בדרך כלל מזכירים את השימוש ב !important בהקשר של מתן פתרון לצורה שבה מפרש IE את מודל הקופסה( Box Model), וכל מיני hack-ים אחרים של דברים שעובדים אחרת ב IE.
הסיבה לכך היא ש IE לא מתייחס להגדרות important כאשר יש כמה הגדרות זהות בתוך אותו class:
.myBG
{
background-color: Blue ! important; /*IE ignores this selector while all other browsers consider it*/
background-color: yellow;
}בדוגמא לעיל, ב FF הרקע של אלמנט שיקבל את ה myBG ייצבע בכחול, בעוד שב IE ההגדרה האחרונה תופשת - ז"א רקע צהוב
כמה הבהרות:
-
הסדר שבו רושמים class-ים בתוך מאפיין ה class של אלמנט ( "class="a b" vs class="b a ) לא חשוב - מה שחשוב זה הסדר שבו מופיעים ה class-ים עצמם בקובץ ה css, או יותר נכון - הסדר שבו הם נטענים, כשמדובר בקבצים שונים - ההגדרה האחרונה תופשת.
-
הסעיף לעיל נכון אלא אם הוספנו important ל property דבר שיגרום לה לתפוש, ללא קשר למה שנטען אחריה.
-
important כן משפיע ב IE כשמדובר ב class-ים שונים (בדיוק כמו ב FF) - ה class שבו הוגדר important על property יתפוש , ולא משנה מה בא אחריו - יהיה יותר חזק אפילו מ inline (כמובן שמדובר רק על ה property שהוגדרה כ important ).
-
לא מומלץ להשתמש ב important בשביל hacking ל IE - בשביל זה MS נתנו לנו
Conditional Comments - פשוט תטענו את הקבצים עם ה hacking במקרה של ה IE הנכון.
דוגמא - נתון ה CSS הבא:
.Silver
{
background-color: Silver;
}
Silver_important
{
background-color:Silver ! important;
}
.Yellow
{
background-color: Yellow;
}
.Silver_important-Yellow
{
background-color: Silver ! important;
background-color: Yellow;
}
ב IE:
ב FF:
בדוגמא לעיל:
-
כשאין important, מה שקובע זה הסדר ב CSS (דוגמאות 1,2).
-
אלמנט שיקבל את Silver_important ייצבע באפור, בכל הדפדפנים (דוגמאות 4,5).
-
אלמנט שיקבל את Silver_important-Yellow לא ייצבע באפור ב IE (דוגמא 3) ויקבל inline style (דוגמא 6) - לעומת זאת, ב FF ייצבע באפור.
אז איך important יכול להיות חבר שלכם?
-
ניתן להשתמש ב important אם רוצים לשנות רק מאפיין אחד ב class במקרים מסויימים, ולא רוצים לשכפל את כל שאר ההגדרות ב CSS.
-
לדרוס הגדרות CSS שמתקבלות ב custom control.
-
לבצע מניפולציות ב javascript - שוב להוספת class עם מאפיין שרוצים לדרוס, ללא הסרת ה class הנוכחי.
-
לצורכי נגישות - הגדלת פונטים בתנאים מסויימים.
אשמח לשמוע הערות/הארות.