«
»

!important keyword and IE

Yeah in a com­ment to my recent @font-face post sug­ges­ted that you should place the con­di­tional com­ments last because how IE6 does not handle the !import­ant keyword correctly.

I will stick with my ori­ginal decision of pla­cing con­di­tional com­ments first, because while IE7 and below do not handle the !import­ant keyword as per the W3C spe­cific­a­tions, they do apply !import­ant consistently.

IE7 and below does apply !import­ant cor­rectly in all but one circumstance:

<style type="text/css" media="all">
.class1 {
color: red !important;
color: blue;
}

IE6 ignores the !import­ant keyword when a prop­erty with !import­ant keyword is given another value in the same declar­a­tion. How­ever, IE does apply !import­ant cor­rectly, when the prop­erty is given a another value in a second declar­a­tion, such as:

.class2 {
color: red !important;
}
.class2 {
color: blue;
}
</style>

If you have access to IE7 or below view a demon­stra­tion, oth­er­wise here are the screenshots.

IE7

IE7 and !important

IE8 (which does apply the !import­ant keyword correctly.

IE8 and !important

This entry was posted on Tuesday, January 6th, 2009 at 4:52 pm and is filed under css and html . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

2 Responses to “!important keyword and IE”

  1. Gary Barber Says:
    January 8th, 2009 at 7:29 am

    Per­son­ally I avoid using !import­ant at all costs, and only use con­di­tional com­ments with the bare min­imum of altern­at­ive rules.

  2. Nick Says:
    January 8th, 2009 at 9:27 am

    Gary, for me it depends a on the cir­cum­stances, I avoid using !import­ant or con­di­tional com­ments to feed sep­ar­ate rules to IE unless there is no altern­at­ive. I will use !import­ant for a quick single fix and if neces­sary then col­lect those rules for a sep­ar­ate stylesheet feed by con­di­tional com­ments to IE.

    I do not use !import­ant as inten­ded, to over­write user styles. If a user wants to use user styles, they should have that option.

    I do not use !import­ant to fix style rules to stop them being over­writ­ten later. I tend to organ­ise by stylesheets well and have a good under­stand­ing of spe­cificity and inheritance.

    @font-face is a little dif­fer­ent, you need to feed dif­fer­ent file formats to dif­fer­ent browsers and you do not want to even attempt to down­load the altern­at­ive format. So I use con­di­tional com­ments to feed IE first and use !import­ant so it does not over­write that rule by using the second file (need to test to see if it down­loads the file).

Google