!important keyword and IE

Yeah in a comment to my recent @font-face post suggested that you should place the conditional comments last because how IE6 does not handle the !important keyword correctly.

I will stick with my original decision of placing conditional comments first, because while IE7 and below do not handle the !important keyword as per the W3C specifications, they do apply !important consistently.

IE7 and below does apply !important correctly in all but one circumstance:

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

IE6 ignores the !important keyword when a property with !important keyword is given another value in the same declaration. However, IE does apply !important correctly, when the property is given a another value in a second declaration, such as:

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

If you have access to IE7 or below view a demonstration, otherwise here are the screenshots.

IE7

IE7 and !important

IE8 (which does apply the !important keyword correctly.

IE8 and !important

2 Responses to “!important keyword and IE”

  1. Gary Barber Says:

    Personally I avoid using !important at all costs, and only use conditional comments with the bare minimum of alternative rules.

  2. Nick Says:

    Gary, for me it depends a on the circumstances, I avoid using !important or conditional comments to feed separate rules to IE unless there is no alternative. I will use !important for a quick single fix and if necessary then collect those rules for a separate stylesheet feed by conditional comments to IE.

    I do not use !important as intended, to overwrite user styles. If a user wants to use user styles, they should have that option.

    I do not use !important to fix style rules to stop them being overwritten later. I tend to organise by stylesheets well and have a good understanding of specificity and inheritance.

    @font-face is a little different, you need to feed different file formats to different browsers and you do not want to even attempt to download the alternative format. So I use conditional comments to feed IE first and use !important so it does not overwrite that rule by using the second file (need to test to see if it downloads the file).

Google