Stacking Media Queries with CSS3

Question

I'm trying to stack media queries in CSS, and can't seem to get it to work correctly. What i'm trying to achieve is having a single set of css rules for any of the media queries. I know normally I could use an and to have it apply to different rules, but in this case I'm trying to deal with vendor-specific prefixes so the browser won't satisfy all of the conditions.

Here's what I've got so far:

@media only screen and (min--moz-device-pixel-ratio: 2),
@media only screen and (-o-min-device-pixel-ratio: 2/1),
@media only screen and (-webkit-min-device-pixel-ratio: 2),
@media only screen and (min-device-pixel-ratio: 2) {
    /* My rules go here */
}

What is the correct way to stack rules like this? Also, if there is any further reading on this subject, I'd like to check it out.

Answer 1

The correct way is to have only one @media at the very beginning, followed by a comma-separated list of media queries:

@media only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) {
    /* Your rules go here */
}

@media is only permitted when declaring a distinct media rule, and is not used to separate multiple media queries in a single rule.