Extra parentheses cause simple media query to fail

Question

I just came across a weird thing and was wondering if this is expected behaviour or indeed some sort of bug.

My intention is to write the following code but I narrowed down the issue (see below).

@media only screen
 and (
   (-webkit-min-device-pixel-ratio: 1.2),   /* or */
   (min-resolution: 120dpi)
 ) { ... }

This code works:

@media only screen
 and (-webkit-min-device-pixel-ratio: 1.2) { ... }

adding extra outside parentheses (round brackets), this fails:

@media only screen
 and ( (-webkit-min-device-pixel-ratio: 1.2) ) { ... }

The target platform is latest Chrome on Android 5.1, but I'm open to hear comments on other platforms too.

Answer 1

It depends on what behavior you need to approach. Whether you need and or or for those rules

If you want to apply both of rules for media query, you need to use and logical operator

@media only screen and (-webkit-min-device-pixel-ratio: 1.2)
                   and (min-resolution: 120dpi) 
{ ... }

If you want to apply any one of the rules for media query, you need to use comma :

@media only screen and (-webkit-min-device-pixel-ratio: 1.2), 
       only screen and (min-resolution: 120dpi)
{ ... }