Media Queries Level 5

https://www.w3.org/TR/mediaqueries-5/
Admin
Media Queries Level 5 describes the mechanism and syntax of media queries, media types, and media...
Tokens:34,994
Snippets:222
Trust Score:10
Update:6 days ago
Show doc for...
Tokens:
Raw
### Media query for fullscreen display mode and :fullscreen pseudo-class

Source: https://www.w3.org/TR/mediaqueries-5

CSS example showing the difference between the display-mode: fullscreen media query and the :fullscreen pseudo-class.

```css
/* applies when the viewport is fullscreen */
@media (display-mode: fullscreen) { … }

/* applies when an element is fullscreen */
#game:fullscreen { … }
```

--------------------------------

### Match device-aspect-ratio

Source: https://www.w3.org/TR/mediaqueries-5

Examples of media queries matching a 16:9 aspect ratio using different equivalent ratios.

```css
@media (device-aspect-ratio: 16/9) { … }
@media (device-aspect-ratio: 32/18) { … }
@media (device-aspect-ratio: 1280/720) { … }
@media (device-aspect-ratio: 2560/1440) { … }
```

--------------------------------

### Manifest requesting standalone display mode

Source: https://www.w3.org/TR/mediaqueries-5

JSON example showing how to request the standalone display mode in a Web App Manifest.

```json
{
  "display": "standalone"
}
```

--------------------------------

### Apply styles with device-width

Source: https://www.w3.org/TR/mediaqueries-5

Example of using the device-width media feature to apply styles to screens less than 800px wide.

```css
@media (device-width < 800px) { … }
```

--------------------------------

### Media query example in HTML, XHTML, XML, @import, and @media

Source: https://www.w3.org/TR/mediaqueries-5

Shows the same media query (screen and color, projection and color) applied in five different contexts: HTML link, XHTML link, XML stylesheet, CSS @import, and CSS @media.

```html
<link media="screen and (color), projection and (color)"
      rel="stylesheet" href="example.css">

<link media="screen and (color), projection and (color)"
      rel="stylesheet" href="example.css" />

<?xml-stylesheet media="screen and (color), projection and (color)"
                 rel="stylesheet" href="example.css" ?>

@import url(example.css) screen and (color), projection and (color);

@media screen and (color), projection and (color) { … }

```

--------------------------------

### Media query with device-aspect-ratio on speech device

Source: https://www.w3.org/TR/mediaqueries-5

This example shows a media query that will always evaluate to false on speech devices because the device-aspect-ratio feature does not apply to them. The stylesheet will not be used on such devices.

```html
<link media="speech and (device-aspect-ratio: 16/9)"
      rel="stylesheet" href="example.css">
```

--------------------------------

### Apply stylesheet with device-height

Source: https://www.w3.org/TR/mediaqueries-5

Example of using the device-height media feature in a link element to apply a stylesheet to screens taller than 600px.

```html
<link rel="stylesheet" media="(device-height > 600px)" />
```

--------------------------------

### Hide back button using boolean nav-controls

Source: https://www.w3.org/TR/mediaqueries-5

Shorter syntax for the same example, using the nav-controls feature in a boolean context. It matches when the feature is true, i.e., when the user agent provides navigation controls.

```css
@media (nav-controls) {
  #back-button {
    display: none;
  }
}
```

--------------------------------

### Media query using (height > -100px)

Source: https://www.w3.org/TR/mediaqueries-5

This example uses a range comparison to test that the viewport height is greater than -100px. It results in a green background on all visual devices, as negative heights are false in the negative range.

```css
@media (height > -100px) {
  body { background: green; }
}
```

--------------------------------

### CSS: Using prefers-reduced-data to serve smaller images

Source: https://www.w3.org/TR/mediaqueries-5

Example of using the prefers-reduced-data media feature to serve a lighter image when the user has enabled data-saving mode. The default heavy image is replaced with a light image inside the media query.

```css
.image {
  background-image: url("images/heavy.jpg");
}

@media (prefers-reduced-data: reduce) {
  /* Save-Data: On */
  .image {
    background-image: url("images/light.jpg");
  }
}

```

--------------------------------

### Equivalent min-resolution using dpcm

Source: https://www.w3.org/TR/mediaqueries-5

Equivalent to the previous example but uses the CSS cm unit, matching devices with resolution greater than 118 dots per CSS centimeter.

```css
@media print and (min-resolution: 118dpcm) { … }
```

--------------------------------

### Media query using not (resolution: -300dpi)

Source: https://www.w3.org/TR/mediaqueries-5

This example uses the 'not' operator with a discrete-like syntax for resolution to test that the resolution is not -300dpi. It results in a green background on all visual devices, as negative resolutions are false in the negative range.

```css
@media not (resolution: -300dpi) {
  body { background: green; }
}
```

--------------------------------

### Media query using not (width <= -100px)

Source: https://www.w3.org/TR/mediaqueries-5

This example uses the 'not' operator with a range comparison to test that the viewport width is not less than or equal to -100px. It results in a green background on all visual devices, as negative widths are false in the negative range.

```css
@media not (width <= -100px) {
  body { background: green; }
}
```

--------------------------------

### CSS @import rule with media query for screen and color

Source: https://www.w3.org/TR/mediaqueries-5

Imports example.css for color screens using the @import rule with the same media query.

```css
@import url(example.css) screen and (color);
```

--------------------------------

### Equivalent media queries: @media all and @media with empty query

Source: https://www.w3.org/TR/mediaqueries-5

Shows that an empty media query list evaluates to true, making '@media all' and '@media' equivalent.

```css
@media all { … }
```

```css
@media { … }
```

--------------------------------

### HTML link element with media query for screen and color

Source: https://www.w3.org/TR/mediaqueries-5

Applies example.css to color screens. The media attribute uses the media query 'screen and (color)'.

```html
<link rel="stylesheet" media="screen and (color)" href="example.css" />
```

--------------------------------

### Script-based custom media queries with CSS.customMedia

Source: https://www.w3.org/TR/mediaqueries-5

Shows how to set a custom media query value from JavaScript using CSS.customMedia.set() and use it in CSS with the _foo syntax.

```html
<script>
CSS.customMedia.set('--foo', 5);
</script>
<style>
@media (_foo: 5) { ... }
@media (_foo < 10) { ... }
</style>
```

--------------------------------

### CSS: Use @media (update) to always show underlines on non-updating devices

Source: https://www.w3.org/TR/mediaqueries-5

Applies underlines on hover only in updating devices; in non-updating UAs, links get default underline at all times. The comment explains the fallback behavior.

```css
@media (update) {
  a { text-decoration: none; }
  a:hover, a:focus { text-decoration: underline; }
}
/* In non-updating UAs, the links get their default underline at all times. */
```

--------------------------------

### CSS: Using min-/max- prefixes for a 320px breakpoint

Source: https://www.w3.org/TR/mediaqueries-5

Two media queries using max-width and min-width to target viewports <= 320px and >= 321px. This approach can leave gaps for fractional viewport sizes between 320px and 321px.

```css
@media (max-width: 320px) { /* styles for viewports <= 320px */ }
@media (min-width: 321px) { /* styles for viewports >= 321px */ }
```

--------------------------------

### Prefixed media feature is unknown

Source: https://www.w3.org/TR/mediaqueries-5

The 'orientation' feature does not accept prefixes, so 'min-orientation' is treated as an unknown media feature and the query becomes 'not all'.

```css
@media (min-orientation:portrait) { … }

```

--------------------------------

### CSS: Using range context for a 320px breakpoint

Source: https://www.w3.org/TR/mediaqueries-5

Uses range context queries with <= and > operators to avoid gaps and handle fractional viewport sizes more appropriately.

```css
@media (width <= 320px) { /* styles for viewports <= 320px */ }
@media (width > 320px) { /* styles for viewports > 320px */ }
```

--------------------------------

### CSS: Adjust styles for additive displays using @media(environment-blending: additive)

Source: https://www.w3.org/TR/mediaqueries-5

Sets white background and black text by default, then switches to black background and white text for additive displays (e.g., head-up displays).

```css
body { background-color: white; }
p { color: black; }

@media(environment-blending: additive) {
  body { background-color: black; }
  p { color: white; font-size: 16px; font-weight: 1000; }
}
```

--------------------------------

### Range syntax for viewport width between 400 and 700 pixels

Source: https://www.w3.org/TR/mediaqueries-5

Uses the range syntax to target devices with viewport widths between 400 and 700 pixels.

```css
@media (400px <= width <= 700px) { … }

```

--------------------------------

### Equivalent expansion of custom media query

Source: https://www.w3.org/TR/mediaqueries-5

Shows the correct logical expansion of the --modern custom media query. The custom media query is treated as a boolean condition, not as a textual substitution.

```css
@media ((color) or (hover)) and (width > 1024px) {
  .a { color: green; }
}
```

--------------------------------

### CSS: Two media queries for all color devices

Source: https://www.w3.org/TR/mediaqueries-5

Both queries express that a style sheet applies to all color devices. The first uses the 'color' feature, the second uses 'min-color: 1'.

```css
@media (color) { … }
@media (min-color: 1) { … }
```

--------------------------------

### HTML link element with not modifier for non-color screens

Source: https://www.w3.org/TR/mediaqueries-5

Applies example.css to everything except color-capable screens. The entire media query is negated, not just the media type.

```html
<link rel="stylesheet" media="not screen and (color)" href="example.css" />
```

--------------------------------

### Apply style sheet to all monochrome devices

Source: https://www.w3.org/TR/mediaqueries-5

Uses the monochrome media feature without a value to match any monochrome device.

```css
@media (monochrome) { … }
```

--------------------------------

### CSS: Two media queries for all color index devices

Source: https://www.w3.org/TR/mediaqueries-5

Both queries express that a style sheet applies to all color index devices. The first uses the 'color-index' feature, the second uses 'color-index >= 1'.

```css
@media (color-index) { … }
@media (color-index >= 1) { … }
```

--------------------------------

### CSS: Media query for color devices with at least 8 bits per component

Source: https://www.w3.org/TR/mediaqueries-5

Uses the range syntax 'color >= 8' to target devices with at least 8 bits per color component.

```css
@media (color >= 8) { … }
```

--------------------------------

### Using a custom media query in a media query

Source: https://www.w3.org/TR/mediaqueries-5

Shows how to define a custom media query --modern and use it in a @media rule. The custom media query is evaluated logically, not as textual substitution.

```css
/* --modern targets modern devices that support color or hover */
@custom-media --modern (color), (hover);

@media (--modern) and (width > 1024px) {
  .a { color: green; }
}
```

--------------------------------

### Media query for standalone display mode

Source: https://www.w3.org/TR/mediaqueries-5

CSS media query to check if the user agent has applied the standalone display mode.

```css
@media (display-mode: standalone) { … }
```

--------------------------------

### prefers-reduced-transparency

Source: https://www.w3.org/TR/mediaqueries-5

The prefers-reduced-transparency media feature detects if the user has requested the system minimize the amount of transparent or translucent layer effects it uses.

```APIDOC
## prefers-reduced-transparency

### Description
The `prefers-reduced-transparency` media feature is used to detect if the user has requested the system minimize the amount of transparent or translucent layer effects it uses.

### For
@media

### Value
`no-preference` | `reduce`

### Type
discrete

### Values
- **no-preference** - Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the boolean context.
- **reduce** - Indicates that user has notified the system that they prefer an interface that minimizes the amount of transparent or translucent layer effects.
```

--------------------------------

### HTML link media attribute for screen and print

Source: https://www.w3.org/TR/mediaqueries-5

Shows how to link different stylesheets for screen and print media types using the media attribute in HTML.

```html
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

```
Tokens:
Raw