1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
|
// Media queries can be nested within one another. The intersection of the two
// queries will be generated.
@media screen {
a {b: c}
@media (color) {x {y: z}}
}
// Features always go to the end of a query, even if they're at an outer nesting
// level.
@media (color) {
a {b: c}
@media screen {x {y: z}}
}
// Different features can be intersected.
@media (max-width: 300px) {
a {b: c}
@media (min-width: 200px) {x {y: z}}
}
// Different media types *can't* be intersected, so they're eliminated.
@media screen {
a {b: c}
@media print {x {y: z}}
}
// Likewise, there's no way to generate the intersection of these queries. We
// could write `not screen and (color)`, but that actually means "neither
// `screen` nor `(color)`" rather than "not `screen` but yes `(color)`.
//
// The latest spec allows us to generate `not screen and not (color)` here,
// which would work, but no browsers support it yet.
@media not screen {
a {b: c}
@media (color) {x {y: z}}
}
// The intersection of `not screen` and `print` is just `print`.
@media not screen {
a {b: c}
@media print {x {y: z}}
}
@media print {
a {b: c}
@media not screen {x {y: z}}
}
/// The intersection of `not screen` and `screen` is empty.
@media not screen {
a {b: c}
@media screen {x {y: z}}
}
@media screen {
a {b: c}
@media not screen {x {y: z}}
}
// Unlike `not`, the `only` keyword is preserved through intersection.
@media only screen {
a {b: c}
@media (color) {x {y: z}}
}
|