The Naked Green

2005.2.24 Thursday

!important Declaration

Filed under: Web Design — Mr. Green @ 10.29 am

No, I don’t have some mind-boggling, profound idea to share with you. I learned something (that may be mind-boggling) about CSS today.

I was working on some CSS for Stevish.com, I came across some strange code:


margin: 0 !important;
margin: 0 6px 0 1px;

Not knowing what it was, I promptly deleted it with no adverse effects and moved on. Then I thought better of the situation and figured I should find out what this strange “hack” is supposed to do. That was not easily done to to search engines removing the ! in !important. alltheweb was the only one I found that would keep it and even then I got plenty of importants and some hokiness. I did find what I was looking for: 6.4.2 !important rules of w3c’s CSS2 Specification:

CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author’s style sheet override those in a user’s style sheet (see cascade rule 3).

However, for balance, an “!important” declaration (the keywords “!” and “important” follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain “!important” declarations, and user “!important” rules override author “!important” rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.

So it’s an actual CSS declaration! It didn’t seem to make sense in context, though, because there are two margin selectors in the sample code. So, I figured it was yet another “standards compliant” hack to deal with the infamous Internet Exploder. I decided it would be quicker to mess with the code myself and found that IE will override an !important declaration with a second selector (margin), while a standards compliant browser such as Firefox will not.

Here’s an example:

Using the following CSS:

style="color: green !important; color: red;"

This sentence is green in Firefox and red in IE.

There may be people searching for the “exclamation point important” hack or the “exclamation point important” declaration and with search engines not reading !important right, I thought I would help.

3 Comments »

  1. I searched “!important” just as you predicted with no results and eventually found your page. Thanks for the information! I wonder why google strips the exclamation point.

    Comment by Logan — 2005.3.22 Tuesday @ 11.58 pm

  2. Thanks for your comment! I’m glad I could be of service especially since it took me a while to find information.

    Comment by Mr. Green — 2005.3.23 Wednesday @ 8.54 am

  3. >> This sentence is green in Firefox and red in IE.

    A perfect example - thanks!

    Comment by Anonymous — 2006.12.29 Friday @ 11.43 am

RSS feed for comments on this post. TrackBack URI

Powered by WORDPRESS