CODEWITHSUNDEEP
cssmedia-queries
cyreb7
cyreb7

Reputation: 317

How to hide a CSS media query from print? "not" logical operator does not work

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.

Upvotes: 29

Views: 23655

Answers (6)

Paulsarms
Paulsarms

Reputation: 21

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) {
      ...
}

Upvotes: 0

Que
Que

Reputation: 524

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.

Upvotes: 36

cikabole
cikabole

Reputation: 65

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) { ... }

Upvotes: 3

Matt Kantor
Matt Kantor

Reputation: 1754

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.

Upvotes: 7

brentonstrine
brentonstrine

Reputation: 22752

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.

Upvotes: 9

turboki
turboki

Reputation: 29

You could try something like:

@media screen,handheld,projection,tv,tty { ... }

Upvotes: 0

Related Questions