In CSS Media queries, you have the option to use , (for "or") and and to meet media query criteria. For instance:
@media (min-width: 768px) and (min-resolution: 2dppx) { ... }
But what if you wish to combine and and , within the same media query? An example could be when min-resolution is not universally supported across browsers. In such cases, you might have to structure it like this:
@media
(-webkit-min-device-pixel-ratio: 2),
(min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2dppx) { ... }
For this scenario, any of those conditions must match for the media query to take effect.
If you wanted to add another requirement like min-width: 768px to the media query, how would you go about it? Is there a way to group the "or" queries together and link them with an and? Perhaps something along these lines:
@media
(
(-webkit-min-device-pixel-ratio: 2),
(min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2dppx)
)
and
(min-width: 768px) { ... }
The above syntax may not function as intended, but it demonstrates the concept. It's akin to how one can group SQL AND and OR queries using (...) parentheses.
Can this sort of grouping be achieved in CSS?
EDIT:
This approach appears to work, although it does seem somewhat cumbersome in terms of syntax:
@media
(-webkit-min-device-pixel-ratio: 2) and (min-width: 768px),
(min-device-pixel-ratio: 2) and (min-width: 768px),
(min-resolution: 192dpi) and (min-width: 768px),
(min-resolution: 2dppx) and (min-width: 768px)
{ ... }
Is this the only method available to achieve this outcome?