Monday, May 11, 2009

!important

I know I am a bit late in understanding this concept, but it's better if it's later than never. I learnt about the !important property today. This keyword is used in CSS to tell the browser that whichever rule has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag.
The best use of this property is the famous 'Holy Hack for IE'. I am sure if you have ever worked on rounded corners with images, then you have encountered that everything works fine in all other browsers but in IE, there is an issue of 2 pixels. I'll explain that some other day. For now the fix is !important property.
For example,


.Inner_Form {
width:648px !important;
width: 650px;
background-color:#FFFFE5;
border-left: solid 1px #D4D4D5;
border-right: solid 1px #D4D4D5;
border-top: none;
border-bottom: none;
margin:0 1em;
}

In this code, notice that the width is being defined two times. This is to trick the IE browser. What this code is doing that it is telling all the browsers that width 648px is an important thing. Mind it! BUT as we all know that IE is one of the dumbest browser, which is unable to interpret the !important tag. Which in a way is good for us. We can now trick the IE by telling that width should be 650px ;) This solves our 2 px problem