Quick question: what does !important means?

Discussion in 'CSS' started by Giorgi, Sep 19, 2007.

  1. #1
    Hello there...

    Sometimes when I review other ppls CSS styles (my kinda way learning things :D ), I keep coming up with some kind of !important comment... basiclly in css hacks... what does it means? why is it used?

    thank you.
     
    Giorgi, Sep 19, 2007 IP
  2. Colbyt

    Colbyt Notable Member

    Messages:
    3,224
    Likes Received:
    185
    Best Answers:
    0
    Trophy Points:
    210
    #2
    It alerts the Browser that attention is required. In this example:
    width:160px !important; /*moz width*/
    width:170px; /*IE width*/

    it sets the div width for FF at 160px(plus padding)
    and IE at 170px (with padding)

    The div is then rendered the same in both browsers.
     
    Colbyt, Sep 20, 2007 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Funny, I thought it was the other way around: the IE looked at !important.

    It always confuses me because to me ! means "not". I guess not so in html.
     
    Stomme poes, Sep 20, 2007 IP
  4. krt

    krt Well-Known Member

    Messages:
    829
    Likes Received:
    38
    Best Answers:
    0
    Trophy Points:
    120
    #4
    Not really for "attention", it's used to set precedence. Colbyt, I wouldn't use a hack to demonstrate things like this.

    Stommepose, it is IE that doesn't support this value.
     
    krt, Sep 20, 2007 IP
  5. qube99

    qube99 Peon

    Messages:
    75
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yes, it is used to set precedence in compliant browsers. Basically it overrides everything, including user stylesheets. Use it with care, it often violates usability standards.
     
    qube99, Sep 20, 2007 IP
  6. krt

    krt Well-Known Member

    Messages:
    829
    Likes Received:
    38
    Best Answers:
    0
    Trophy Points:
    120
    #6
    When you say "usability", are you sure you are referring to the correct term? If so, how does it do so.

    The negatives of !important may be confusion for developers during maintenance of CSS and lack of browser support (namely IE). Nothing to do with usability for the end user.
     
    krt, Sep 20, 2007 IP
  7. simonpeterong

    simonpeterong Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I find "!important" usable when I'm making forms especially if I want to have input be aligned perfectly
     
    simonpeterong, Sep 20, 2007 IP
  8. KatieK

    KatieK Active Member

    Messages:
    116
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    58
    #8
    Adding !important to a style declaration will ensure that declaration overrides all other style declarations applied to the same element.

    So, if you use this CSS code: p { color: blue !important; }, then all of your paragraphs will be blue. Even paragraphs with a class or id indicating a different color, and even those with an inline style declaration.

    qube99, it was only in CSS1 that !important declarations overrode reader style sheets. Reader stylesheets should override !important in CSS2 browsers.
     
    KatieK, Sep 20, 2007 IP
  9. qube99

    qube99 Peon

    Messages:
    75
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Thanks for pointing the CSS2 out. I wonder which browsers actually do it the new way?

    Accessibility standards are for handicapped folks, some users will override your stylesheets and use their own because of vision problems. This is where
    !important can cause trouble.
     
    qube99, Sep 20, 2007 IP
  10. krt

    krt Well-Known Member

    Messages:
    829
    Likes Received:
    38
    Best Answers:
    0
    Trophy Points:
    120
    #10
    !important is supported by most browsers, including IE7 in standards mode only. It does not work in IE <6. Tested FF2, Opera, IE6, IE7, Safari.
     
    krt, Sep 20, 2007 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #11
    Way back when I was first learning CSS, !important confused the HELL out of me...

    NOT because I couldn't grasp how it worked, but because it was PAINFULLY obvious nobody involved with programming was involved in it's creation.

    Why do I say this? It's the same problem Stomme has with it: What does ! mean in most AT&T syntax programming languages? It means 'NOT'.

    !important... Not important? Shouldn't that really have the opposite effect it does?

    I know it doesn't, but the programmer in me cringes every time I see it.
     
    deathshadow, Sep 20, 2007 IP
  12. krt

    krt Well-Known Member

    Messages:
    829
    Likes Received:
    38
    Best Answers:
    0
    Trophy Points:
    120
    #12
    It only takes one look at a reference and a DIY example to see this is not the case, it's not that confusing.

    Maybe an @ could have been used instead so it can be consistent with the other keywords such as import and media, oh well, who cares, not like there are many practical uses for !important anyway, it usually causes more problems than it solves.
     
    krt, Sep 20, 2007 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Or ends up being used for some garbage 'silver bullet' fix for a deeper underlying problem that the original coder is too lazy to fix.

    Hence the reason you see it so much on sites where the person doing the CSS has no access to the 'master' CSS or HTML or lacks the knowledge to make those changes - when the HTML in question is total garbage. See mySpace, Blogger, Xanga, most wordpress templates, HTML set up from WYSIWYGS like Frontpage or Dreamweaver, etc, etc.
     
    deathshadow, Sep 21, 2007 IP