Which browsers support the CSS !important directive, and what are the various quirks amongst the different browsers that do support it?
+7
A:
Excellent browser support.
It was part of the CSS1 spec and has been around forever, and was always easy enough to implement that browsers appear to have gotten it right on the first try.
At the very least (from personal experience) IE5.5+, Firefox 1+, Safari 3+, Chrome 1+.
Pretty much supported by every browser that supports CSS (which is every browser you care about).
Triptych
2009-08-25 18:42:06
IE6 officially supports it, but it doesn't actually work in IE6 the way it should
Darko Z
2009-08-25 18:47:06
@Darko do you have an example of IE6 not supporting !important correctly?
Triptych
2009-08-25 18:47:54
Yeah try the example from my answer and you'll see. just substitute width for background so its easier to see. you can also try jimyi's answer to see the same
Darko Z
2009-08-25 18:49:03
I see that now, and see how it's useful as a hack. However, reading the CSS1 spec I can't call it a "bug".
Triptych
2009-08-25 18:54:01
right, it just doesn't behave like it should....
Darko Z
2009-08-25 18:56:23
+1
A:
All common browsers support it. I would be surprised if a browser that supports CSS doesn't understand !important.
svinto
2009-08-25 18:42:44
+2
A:
Any browser which supports CSS1+ - ie, any browser that supports CSS - even IE. Even if the CSS implementations are not fully standards-compliant, !important is a core CSS feature.
To elaborate, IIRC, IE5+, all Firefox, most Netscape, Opera, Safari, Chrome.
Lucas Jones
2009-08-25 18:43:33
+3
A:
According to Wiki, IE7, FireFox 1.0, Safari 1.0, Opera 7, and Chrome fully support !important. IE6 supports it, but it does have a bug. If you do this, color will be red:
h1 {
color: green !important;
color: red;
}
jimyi
2009-08-25 18:45:21
A:
All browsers apart from IE6 support it which makes it quite handy for CSS hacks. Example:
#someElement { width:200px !important; width:198px; }
All browsers apart from IE6 will render #someElement at 200px because they will honor the !important. IE6 however will just ignore the !important and render #someElement at 198px.
EDIT: Most common use case scenario for this (at least with me) is using it to correct the double margin bug in IE6
Darko Z
2009-08-25 18:45:55