!important is Actually Useful (in Print Style Sheets)

The 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.