26

I am trying to hide a media query from being printed, so I came up with @media not print and (min-width:732px). But for whatever reason, this (and many variations I have tried) does not display as I would expect in browsers.

The only option I can think of is to use @media screen and (max-width:732px), but I would like to avoid this as it excludes all the other media types besides screen.

cyreb7
  • 316
  • 1
  • 4
  • 11
  • Can you explain how exactly it does not display as you would expect? – BoltClock May 16 '12 at 12:24
  • We had a similar issue. Some browsers simply ignore the entire declaration if `not print` is there and therefore don't apply any of the styles inside the `max-width` media query. – Chadwick Meyer Nov 13 '14 at 17:07

6 Answers6

33

Media queries grammar is pretty limited to say the least.

But with CSS3 (not CSS2.1) it seems that you can nest @media rules.

@media not print {
    @media (min-width:732px) {
        ...
    }
}

This basically executes as (not print) and (min-width:732px).

See https://stackoverflow.com/a/11747166/3291457 for more info.

Community
  • 1
  • 1
Que
  • 494
  • 4
  • 4
9

How about something like this?

body { min-width:732px; }
@media print {
   body { min-width:initial; }
}

The min-width will be set to 732 for everything, except print, which will get some other value that you specify. Depending on your situation, you can set a different width, or try something like "thiswontwork" (which sometimes causes the value to be set to the initial value) or "inherit" or something like that.

brentonstrine
  • 21,694
  • 25
  • 74
  • 120
  • 1
    I like your idea better than @turboki's because overriding is more future friendly than specifying every media type and hoping they don't add more. – cyreb7 May 15 '12 at 00:54
  • 1
    `initial` has poorer support than media queries or the `print` media type, so on some browsers `min-width` may continue to be `732px` - be careful! – BoltClock May 16 '12 at 12:23
7

If I'm correct in my assumptions about the behavior you expected, the issue is that the precedence of not is lower than and.

@media not print and (min-width:732px) means "any media except for printers with at least 732px-wide viewports" (so it will apply to any non-printer and skinny printers) not "any media except printers, as long as that media has at least a 732px-wide viewport" (which is what I assume you expected).

Since parentheses aren't valid around media types and @media rules cannot be nested, working around it is kind of annoying. For simple cases, brentonstrine's answer is a good solution, but for queries which enclose many styles it can be burdensome to make sure they're all overridden properly.

I put together some example media queries when I was trying to figure this out myself earlier today.

Community
  • 1
  • 1
Matt Kantor
  • 1,704
  • 1
  • 19
  • 37
  • 1
    Thinking about this some more, you can fake nested media queries by using an `@import` with a media query or the `media` attribute on a `` element and including the "child" `@media` rules (or additional `@import`s) in the CSS. – Matt Kantor Aug 06 '12 at 19:48
3

As you can't put something like this

@media screen,handheld,projection,tv,tty and (max-width:732px) { ... }

you should write pairs for each media like following: 

@media screen and (max-width:732px), handheld and (max-width:732px), projection and (max-width:732px), tv and (max-width:732px), tty and (max-width:732px) { ... }
cikabole
  • 65
  • 1
  • 5
0

You could try something like:

@media screen,handheld,projection,tv,tty { ... }
turboki
  • 29
  • 4
  • 2
    That is a good idea. Any idea why the `not print` does not work? – cyreb7 May 14 '12 at 21:31
  • I think it should work, except as per W3C spec: "User agents that only support media types (as described in HTML4) will not recognize the ‘not’ keyword and the associated style sheet is therefore not applied." – turboki May 14 '12 at 22:43
0

The above nested query didn't work for me, but after a little reading on Media Queries Media Types at MDN, you can exclude you're media query from print styles by specifying the screen type

So if you have a media query like this which doesn't specify a type, it will have an implied type of all, (which will affect print styles)

@media (min-width:400px) {
     ...
}

To exclude the style from print styles, you'd need to change it to this:

@media screen and (min-width:700px) {
      ...
}
Paulsarms
  • 11
  • 1