Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14

Thread: !important CSS

  1. #1
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    (Mini article)

    I'm leaving this thread here for a reminder to all developers about the !important CSS attribute. Lately I've (in other forums) had to remind people about this and how helpful it can be.

    How to use:

    Code:
    a{
      border: 1px solid red !important;
      border: 1px solid blue;
    }
    
    h1{
      border: 1px solid red !important;
    }
    
    #mydiv h1{
      border: 1px solid blue;
    }
    #1 will cause links to rest in red borders, not in the blue border the rule suggests (as if two rules are of equal specificity, the last is used). The !important can also be used to defeat specificity (#2, where it'll be red again).

    Remember that IE6 does not know of this rule - use this to your advantage. This is by far the best purpose of this rule.

    If a certain width seems to fit IE6 (due to its box model), and you therefore need one for IE6 and one for the others, use it.

    Code:
    #rightbar{
       width: 500px !important; /* The one for good browsers */
       width: 650px;  /* The one for IE6 */
    }
    This is a rough yet simple solution.

    Extra tip: Outlines

    An outline is a second border outside the main border. AFAIK, outlines behave slightly differently from borders in that they do not add to the width of the object.

    Outlines are a so far somewhat rare attribute, most likely because, yup you guessed it, IE6 doesn't know what it is. However in reality they can create some very good effects with very small code. For example...

    Code:
    #mybox{
      background: #999;
      outline: 1px solid #333;
      border: 1px solid #fff;
    }
    Can create something rather neat. Of course it's nothing special, but it does add in that extra "I worked on this" look. But since IE6 doesn't understand that sample above, it'll just show a white border (which might look ugly). So...

    Code:
    #mybox{
      background: #999;
      outline: 1px solid #333;
      border: 1px solid #fff !important;
      border: 1px solid #333;
    }
    And there ya go. Outlines for those who can, and just without the inner layer for IE6.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I've always considered !important a very bad idea. !important declarations tend to override user stylesheets, which is a sizeable accessibility problem. 99.9% of the time, you can achieve anything you can with !important using selector specificity for overriding.

    It's also a bad idea to rely on hacks to make CSS work, and a later definition of something with a selector of the same specificity will override it, so just including the alternate declarations via a conditional comment in a separate stylesheet seems to be a better plan.

    Useful to know, nonetheless! The other day I realized that part of Ext JS actually marks one of their generated styles as !important. That was annoying, because the only way I could override it was by !importanting my own...

  4. #3
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Ah, I see. I just pointed this out for those thinking "what the heck is an !important?" questions, for those who learn by trial. Yes they should be over-ridden by specificity, but sometimes it's more difficult that way. As for the hacks, it's usually for width, which isn't inherited, so I think it's usually ok... it's a bad idea for reusable code, though. Agreed.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Oh, it's definitely useful to know what it is, don't get me wrong

  6. #5
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Especially due to its rather odd placement in CSS, people ask... I've honestly been asked several times if it was an error in my text editor by fellow designers.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Hehehe. Nice.

  8. #7
    Senior Member kade119's Avatar
    Join Date
    Feb 2007
    Location
    USA
    Posts
    532
    Member #
    14888
    Liked
    1 times
    so what is the best way to display a certain style for IE6 alone and not the other browsers?


    a "*"?

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    The best way is to create a separate stylesheet for IE6 and use conditional comments to include it only in the relevant browser.

  10. #9
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Conditionals suck. There's almost always a workaround that doesn't involve sniffing the browser (including comments).
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  11. #10
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Yes, but IE7 proved those break easily. Comments don't suffer the usual by-products of browser-sniffing, because they're not unreliable like browser-sniffing inevitably is. Comments are ignored by non-IE browsers, by their nature, and are used by IE browsers, again, by their nature. They're an ugly solution to an ugly problem, but I consider them a fair bit better than the various CSS hacks that rely on the browser behaving a certain way that get broken completely when part of the behavior gets fixed but the underlying issue isn't (again, like IE7 did with respect to IE6 hacks). I used to be leery of conditional comments a few months ago, but over the past few months I've done a complete 180 and vastly prefer them to the usual CSS hackery.

    That said, there is often a way to achieve what you wish using neither. This is, obviously, the best approach.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:07 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com