The !important in CSS
filed in Web Design on Nov.09, 2008
When a CSS propriety is specified twice, the browser will commonly use the last one. Let’s see an example:
#main {
width:600px;
width:800px;
}
In this example the browser will assign width 800 pixels to the #main element.
The declaration !important can be used in cascading style sheets to give priority to some parameters.
#main {
width:600px !important;
width:800px;
}
In the example above the browser will give priority to the first declaration and the #main element will be 600 pixels width.
So, what’s the point?
Internet Explorer 6 and previous versions simply ignore the declaration !important (while IE 7 supports them) therefore we can take advance of this issue to design a “browser-based” CSS.
For example, we can use the !important declaration to avoid non-standard CSS expressions. Here is a “workaround” which allows to use max/min width with smart browsers and specify a fixed width for IE 6 users:
#main {
margin: 0 auto 0;
max-width: 900px;
min-width: 770px;
width:auto !important;
width:800px;
}
In the above example, the declaration !important is used to specify dynamic width attributes to browsers that support them (e.g. Firefox, Netscape, Opera, Safari and IE 7) while the width is fixed to an average value (800 pixels) for IE 6.
This doesn’t solve completely the matter, but can be considered as a workaround to improve your fluid layout appearance avoiding non-standard code.


Leave a Reply