!important is Actually Useful (in Print Style Sheets)

Andrew Tetlaw
Andrew Tetlaw
Published in
·Updated:

Share this article

SitePoint Premium
Stay Relevant and Grow Your Career in Tech
  • Premium Results
  • Publish articles on SitePoint
  • Daily curated jobs
  • Learning Paths
  • Discounts to dev tools

7 Day Free Trial. Cancel Anytime.

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

iOS Developer, sometimes web developer and Technical Editor.

Share this article

Subscribe to our newsletter

Get the freshest news and resources for developers, designers and digital creators in your inbox each week

© 2000 – 2025 SitePoint Pty. Ltd.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.