CSS Media Queries Flashcards
What are CSS Media Queries?
The CSS Media Query gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example “viewport is wider than 480 pixels”.
Source MDN
What is the syntax of a Media Query?
A media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators. Media queries are case-insensitive.
Media types define the broad category of device for which the media query applies: all, print, screen. The type is optional (assumed to be all) except when using the not or only logical operators.
Media features describe a specific characteristic of the user agent, output device, or environment:
Examples:
Targeting media types
@media print {
/ … /
}
Targeting media features
@media (color) {
/* … */
}
Complex queries
@media screen and (min-width: 30em) and (orientation: landscape) {
/* … */
}
@media screen and (min-width: 30em) and (orientation: landscape) {
/* … */
}
Source MDN
How can you negate a Media Query?
The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.)
The not keyword can’t be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:
@media not all and (monochrome) {
/* … */
}
The above query is evaluated like this:
@media not (all and (monochrome)) {
/* … */
}
As another example, the following media query:
@media not screen and (color), print and (color) {
/* … */
}
This means that the above query is evaluated like this:
@media (not (screen and (color))), print and (color) {
/* … */
}
Source MDN
How can you test for multiple Media Queries?
You can use a comma-separated list to apply styles when the user’s device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user’s device has either a minimum height of 680px or is a screen device in portrait mode:
@media (min-height: 680px), screen and (orientation: portrait) {
/* … */
}
Source MDN
How can you combine multiple types or features in a Media Query?
The and keyword combines a media feature with a media type or other media features.
This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:
@media (min-width: 30em) and (orientation: landscape) {
/* … */
}
Source MDN
How can you improve Media Query compatibility with older browsers?
The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.
@media only screen and (color) {
/* … */
}
Source MDN
Rewrite this Media Query to the new level 4 syntax
@media (max-width: 30em) {
/* … */
}
@media (width <= 30em) { /* … */ }Rewrite this Media Query to the new level 4 syntax
@media (min-width: 30em) and (max-width: 50em) {
/* … */
}
@media (30em <= width <= 50em) { /* … */ }How can you negate a feature in Media Queries level 4?
Using not() around a media feature negates that feature in the query. For example, not(hover) would match if the device had no hover capability:
@media (not(hover)) {
/* … */
}
Source MDN
How can you test for multiple features in Media Queries level 4?
You can use or to test for a match among more than one feature, resolving to true if any of the features are true. For example, the following query tests for devices that have a monochrome display or hover capability:
@media (not (color)) or (hover) {
/* … */
}
Source MDN
List all Media Queries level 3 useful features
- width - Width of the viewport including width of scrollbar.
- height - Height of the viewport.
- aspect-ratio - Width-to-height aspect ratio of the viewport
- resolution - Pixel density of the output device.
- orientation - Orientation of the viewport.
Source dotConference/2017
What are Media Queries’ media types?
Media types describe the general category of a device. Except when using the not or only logical operators, the media type is optional and the all type is implied.
- all - Suitable for all devices.
- print - Intended for paged material and documents viewed on a screen in print preview mode. (Please see paged media for information about formatting issues that are specific to these formats.)
- screen - Intended primarily for screens.
Source MDN
List and explain all Media Queries’ logical operators
The logical operators not, and, and only can be used to compose a complex media query. You can also combine multiple media queries into a single rule by separating them with commas.
and Used for combining multiple media features together into a single media query, requiring each chained feature to return true for the query to be true. It is also used for joining media features with media types.
not - Used to negate a media query, returning true if the query would otherwise return false. If present in a comma-separated list of queries, it will only negate the specific query to which it is applied. If you use the not operator, you must also specify a media type.
Note: In Level 3, the not keyword can’t be used to negate an individual media feature expression, only an entire media query.
only - Applies a style only if an entire query matches. It is useful for preventing older browsers from applying selected styles. If you use the only operator, you must also specify a media type.
, (comma) - Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator.
or - Equivalent to the , operator. Added in Media Queries Level 4.
Source MDN
Given this Media Queries:
@media screen {
a {
color: cyan;
text-decoration: underline;
}
}
@media print {
a::after {
content: " (" attr(href) ")";
}
}
What will the browser print depending on the media type?
Is it possible to nest Media Queries?
Yes.
For example you could do:
@media screen and (orientation: portrait), print {
@media (min-width: 20em) and (max-width: 40em) {
…
}
}
What is the range syntax of media queries level 4?
Syntax improvements to make media queries using features that have a “range” type (like width or height) less verbose. Can be used with ordinary mathematical comparison operators: >, <, >=, or <=.
For example:
@media (100px <= width <= 1900px) is the equivalent of @media (min-width: 100px) and (max-width: 1900px)
Source w3.org
