!important is Actually Useful (in Print Style Sheets)

!importantThe poor old !important statement receives a lot of flak in the CSS community, and with good reason. It’s unnecessary, creates a maintenance nightmare, and makes a hollow mockery of the cascade. I haven’t thought about using !important in years, until I discovered one very good use for it: print style sheets.

Let’s pretend that we want to create an image gallery. Doing our best at honoring the ideals of progressive enhancement, we first make sure that the images are contained within an HTML list. Eventually we want to use JavaScript to create a fade-in/fade-out slideshow effect, but our base is a single column of images. If a visitor has JavaScript disabled that’s what they’ll see.

Okay, so far so good. When we come to make a print style sheet, however, we’ll discover a flaw in our plan: when you use JavaScript to animate HTML elements, you inevitably end up modifying the elements’ style attribute. In our slide show, JavaScript has altered the position and opacity of the images, so only one is revealed at a time. When we go to print the gallery page, although we want a single column of images, what we end up printing is only a single image. That’s because you’re unable to specify a target media type for CSS declared in an element’s style attribute; you cannot say that all styles declared in the style attribute are for screen only.

So what you need is a way of specifying print styles that can override the inline styles. There’s only one way to do that: !important. In your print style sheet, reset the image elements’ position and opacity, and add !important:

img.gallery {
  position: static !important;
  opacity: 1 !important;
}

That’s it really; I found a legitimate use for !important and wanted to share it.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.tyssendesign.com.au Tyssen

    When we go to print the gallery page, although we want a single column of images, what we end up printing is only a single image.

    I guess it depends on what type of gallery you’re using. If you’re using a Lightbox-style gallery, the only images on the gallery page will be the thumbnails with links to the larger versions, so when you print the page, you print the thumbnnails, and none of the larger versions. You can go a bit further and let the user print a single larger version (and only the large version) by using js to add a print photo button that swaps out the site’s main print stylesheet and replace it with one that just prints the large image, and then swap them back again when closing the Lightbox image.

  • Anonymous

    My other use for !important is for some classes which have just one style rule

    eg

    .clear {clear:both !important}

    That way if, say, you have a rule for list items which normally don’t clear, but list items in general normally do clear, eg

    li {clear:both}
    #myList li {float:left; clear:none;}

    you can add the .clear class to the last one and get it to work no matter what the specificity of the style making it not clear. Otherwise you’d have to define an extra rule for

    #myList li.clear {clear:both}

    The above isn’t a good example of what I mean (why would you want one list item to clear and others not to?) but I have used !important in situations similar to this in the past and it’s been very useful.

  • _simps_

    And for IE you might want to try setting enabled=false on the alpha filter:
    filter:alpha(opacity=1,enabled=false) !important;
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=1,Enabled=false)” !important;

  • http://fvsch.com Florent V.

    Good point.
    There are a few other legitimate uses of !important. User styles, for instance.

  • Chris Howard

    I hadn’t paid the !important any attention, then just last month read about what it does. And sure enough, within a few days I needed it.

    I’d installed a WordPress plugin that contained its own CSS but I needed to override one of its selector’s properties. Not wanting to edit the original CSS (as that could be overwritten by an update) I included the necessary property and selector in my stylesheet.

    Except – it didn’t work. It seemed the original was taking greater precedence over my override. I assume the original was being loaded after my stylesheet.

    So I used !important, and problem solved.

    If I hadn’t have known about !important I would have spent ages tearing my hair out and trying all sorts of crazy hacks and solutions.

    So, yeah, you don’t need it often, but when you do, it’s a life saver.

  • Enoch Root

    I’ve found !important is essential for some while. We have a CMS where some css is inline – the users can specify the width of columns, boxes, etc in a (terrible) user interface, and the results are etc – I frequently have to override this nonsense, and !important turns out to be the best way.

  • Justen

    I’ve got quite a lot of use out of !important over the years. One of the biggest is overriding inline styles in HTML generated by server-side code that can’t be edited for licensing or practical reasons. It’s a lifesaver whenever working on obscure, proprietary, or otherwise bad templating systems. Granted in that sense it’s only a workaround for code written poorly by others, but I am glad it was provided or I’d be completely out of luck (short of using some awful javascript hack).

  • http://www.sitepoint.com/articlelist/487/ Andrew Tetlaw

    Yeah, !important is the only way to override inline element styles, but if you only need to override a rule in another stylesheet, and your stylesheet appears first, then all you need is a more specific selector. I would resort to !important, in the latter situation. So if another stylesheet, outside of your control has a rule like this:

    #content h1 {
    color: green;
    }

    But you want all the h1 elements to be blue then override it with this:

    body #content h1 {
    color: blue;
    }

    Not ideal, but do-able in a tricky situation.

  • notnuts

    And yet another very nice use for !important:

    When you have an em-based layout, you’d want the text size of a style-switcher for enlarging text to remain the same regardless whether the page is being shown at 100%, 150% or 200%.

    After calculating the (yes, approximate, based on default values) px-correspondent of the em’s and creating the corresponding classes, enter !important to guarantee these sizes are also applied in Firefox and those who would otherwise also resize px-textsizes.

    Cheers!

  • JFK

    IE6 doesn’t support min-height or min-width so !important comes to the rescue:

    div#mydiv {
    min-height: 500px;
    height: auto !important;
    height: 500px; /* for IE6 */
    }

  • http://codefisher.org/ codefisher

    The only time I tend to use !important are in my Firefox extensions. If you don’t use it on the icon for toolbar buttons you risk having everything go bonkers if they install a theme that is designed bad.

  • moosetoga

    Like Florent V., I find myself using !important all the time to override the default styles that come with WordPress plugins. You can’t make the changes to the CSS that comes with the plugins because it’ll get wiped out when you update them.

  • Anonymous

    !important may also be reasonably used, imho, for error messages, when it is important that the messages are displayed clearly and prominently, without any chance that other styles will interfere.

    Regards,
    Paul McKeown

  • gadgetto

    If you ever needed to create a complete Masterpage for MS SharePoint 2007, you will know why you need !important …