### 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: 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 @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: 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.
```

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

### WebIDL: Navigator extension for preferences

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

WebIDL partial interface extending Navigator with a preferences attribute that returns a PreferenceManager instance.

```webidl
[Exposed=Window, SecureContext]
partial interface Navigator {
	[SameObject] readonly attribute PreferenceManager preferences;
};

```

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

### 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">

```

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

### XML: Stylesheet media attribute for color index devices with 256 or more entries

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

Uses the 'min-color-index: 256' media query in an XML stylesheet processing instruction to apply a stylesheet to devices with 256 or more color index entries.

```xml
<?xml-stylesheet media="(min-color-index: 256)"
  href="http://www.example.com/…" ?>
```

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

### @custom-media rule syntax

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

Defines the grammar for the @custom-media rule. The rule takes an extension name and either a media query list or the keywords true or false.

```css
@custom-media = @custom-media <extension-name> [ <media-query-list> | true | false ] ;
```

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

### Apply style sheet when display supports Display P3 color gamut

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

Uses the color-gamut media feature with the p3 value to match displays that support the Display P3 color space.

```css
@media (color-gamut: p3) { … }
```

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

### Incorrect textual substitution of custom media query

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

Shows an incorrect expansion that would result from treating the custom media query as a textual substitution. This is provided as a counterexample.

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

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

### Detect high-resolution screens with resolution >= 2dppx

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

Matches devices with a hardware pixel to CSS px ratio of at least 2, commonly used for high-DPI displays.

```css
@media (resolution >= 2dppx)
```

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

### Detect narrow console screens with grid and max-width

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

Matches grid-based output devices (e.g., tty terminals) with a narrow viewport width of 15em or less.

```css
@media (grid) and (max-width: 15em) { … }
```

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

### CSS: Using fractional value to reduce breakpoint gap

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

Adjusts the min-width value to 320.01px to reduce the chance of viewport widths falling between the two breakpoints.

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

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

### Media query list combining screen and projection with color

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

A media query list that is true if either the media type is screen and it's a color device, or the media type is projection and it's a color device.

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

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

### Aliasing a breakpoint with @custom-media

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

Defines a custom media query --narrow-window for a common breakpoint and uses it in multiple @media rules.

```css
@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
  /* narrow window styles */
}
@media (--narrow-window) and (script) {
  /* special styles for when script is allowed */
}
/* etc */
```

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

### Apply style sheet to monochrome devices with more than 2 bits per pixel

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

Uses the monochrome media feature with a range condition to match devices with more than 2 bits per pixel.

```css
@media (monochrome >= 2) { … }
```

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

### IDL Definitions for CSSCustomMediaRule and PreferenceManager

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

Defines the interfaces for custom media rules and the Navigator preferences manager, including the PreferenceObject for handling user settings.

```webidl
typedef (MediaList or boolean) CustomMediaQuery;

[Exposed=Window]
interface CSSCustomMediaRule : CSSRule {
  readonly attribute CSSOMString name;
  readonly attribute CustomMediaQuery query;
};

[Exposed=Window, SecureContext]
partial interface Navigator {
	[SameObject] readonly attribute PreferenceManager preferences;
};

[Exposed=Window, SecureContext]
interface PreferenceManager {
	readonly attribute PreferenceObject colorScheme;
	readonly attribute PreferenceObject contrast;
	readonly attribute PreferenceObject reducedMotion;
	readonly attribute PreferenceObject reducedTransparency;
	readonly attribute PreferenceObject reducedData;
};

[Exposed=Window, SecureContext]
interface PreferenceObject : EventTarget {
	readonly attribute DOMString? override;
	readonly attribute DOMString value;
	readonly attribute FrozenArray<DOMString> validValues;

	undefined clearOverride();
	Promise<undefined> requestOverride(DOMString? value);

	attribute EventHandler onchange;
};
```

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

### @import rule with print media query

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

Conditionally imports a stylesheet for print media using the @import rule.

```css
@import "print-styles.css" print;

```

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

### Print stylesheet for width greater than 25cm

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

Uses the 'min-width' media feature to apply a stylesheet only when printing on output wider than 25cm.

```html
<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />

```

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

### Minimum width in em units

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

Applies styles when the viewport width is greater than 20em, with em relative to the initial font-size.

```css
@media (min-width: 20em) { … }

```

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

### Media query for portrait orientation

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

Tests for portrait orientation, like a phone held upright.

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

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

### prefers-reduced-motion

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

The prefers-reduced-motion media feature detects if the user has requested the system minimize the amount of non-essential motion it uses.

```APIDOC
## prefers-reduced-motion

### Description
The `prefers-reduced-motion` media feature is used to detect if the user has requested the system minimize the amount of non-essential motion 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 removes or replaces the types of motion-based animation that either trigger discomfort for those with vestibular motion sensitivity, or distraction for those with attention deficits.
```

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

### Navigator.preferences

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

The Navigator interface is extended with a preferences attribute that provides access to the user's preference manager.

```APIDOC
## Navigator.preferences

### Description
Provides access to the user's preference manager, which exposes various user preferences.

### Interface
partial interface Navigator

### Exposed
Window, SecureContext

### Attributes
- **preferences** (PreferenceManager) - readonly, SameObject - The user's preference manager.
```

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

### CSS: Hover-activated drop-down menu for hover-capable devices

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

Use @media (hover) to show a drop-down menu only on devices that can conveniently hover, hiding submenus until hover.

```css
/* Only use a hover-activated drop down menu on devices that can conveniently hover. */
@media (hover) {
  .menu > li        {display:inline-block;}
  .menu ul          {display:none; position:absolute;}
  .menu li:hover ul {display:block; list-style:none; padding:0;}
  /* ... */
}

```

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

### WebIDL: PreferenceManager interface definition

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

WebIDL interface defining readonly attributes for each user preference media feature: colorScheme, contrast, reducedMotion, reducedTransparency, and reducedData.

```webidl
[Exposed=Window, SecureContext]
interface PreferenceManager {
	readonly attribute PreferenceObject colorScheme;
	readonly attribute PreferenceObject contrast;
	readonly attribute PreferenceObject reducedMotion;
	readonly attribute PreferenceObject reducedTransparency;
	readonly attribute PreferenceObject reducedData;
};

```

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

### Use min-resolution: 300dpi for print

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

Applies styles to devices with resolution greater than 300 dots per CSS inch, typically for print media.

```css
@media print and (min-resolution: 300dpi) { … }
```

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

### CSS: Adjust form controls for coarse pointer

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

Use @media (pointer:coarse) to enlarge checkboxes and radio buttons when the primary pointing device is inaccurate, improving usability on touchscreens and motion sensors.

```css
/* Make radio buttons and check boxes larger if we have an inaccurate primary pointing device */
@media (pointer:coarse) {
  input[type="checkbox"], input[type="radio"] {
    min-width:30px;
    min-height:40px;
    background:transparent;
  }
}

```

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

### PreferenceManager

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

The PreferenceManager interface exposes preference objects for various user preferences such as color scheme, contrast, reduced motion, reduced transparency, and reduced data.

```APIDOC
## PreferenceManager

### Description
Exposes preference objects for various user preferences.

### Interface
PreferenceManager

### Exposed
Window, SecureContext

### Attributes
- **colorScheme** (PreferenceObject) - readonly - The user's color scheme preference.
- **contrast** (PreferenceObject) - readonly - The user's contrast preference.
- **reducedMotion** (PreferenceObject) - readonly - The user's reduced motion preference.
- **reducedTransparency** (PreferenceObject) - readonly - The user's reduced transparency preference.
- **reducedData** (PreferenceObject) - readonly - The user's reduced data preference.
```

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

### Separate style sheets for color and monochrome print

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

Uses link elements with media attributes to apply different style sheets for color and monochrome print.

```html
<link rel="stylesheet" media="print and (color)" href="http://…" />
<link rel="stylesheet" media="print and (monochrome)" href="http://…" />
```

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

### PreferenceObject

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

The PreferenceObject interface represents a single user preference. It allows reading the current value, overriding it, and requesting an override.

```APIDOC
## PreferenceObject

### Description
Represents a single user preference. Provides access to the current value, valid values, and methods to override or request an override.

### Interface
PreferenceObject : EventTarget

### Exposed
Window, SecureContext

### Attributes
- **override** (DOMString?) - readonly - The current override value, or null if none.
- **value** (DOMString) - readonly - The current value of the preference.
- **validValues** (FrozenArray<DOMString>) - readonly - The list of valid values for this preference.
- **onchange** (EventHandler) - Event handler for the change event.

### Methods
- **clearOverride()** - undefined - Clears the current override.
- **requestOverride(value)** - Promise<undefined> - Requests an override to the given value. The value can be null.
```

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

### Media query for two horizontal viewport segments

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

Detects a viewport that has exactly two segments side-by-side.

```css
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) { … }
```

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

### PreferenceObject interface

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

The PreferenceObject interface provides access to user preference overrides for media features. It includes attributes for the current override, value, valid values, and an event handler for changes.

```APIDOC
## PreferenceObject interface

### Description
The `PreferenceObject` interface is used to override user preferences for media features such as reduced data usage. It provides attributes to read the current override, the effective value, and the list of valid values, as well as methods to clear or request an override.

### Interface Definition
```webidl
[Exposed=Window, SecureContext]
interface PreferenceObject : EventTarget {
	readonly attribute DOMString? override;
	readonly attribute DOMString value;
	readonly attribute FrozenArray<DOMString> validValues;

	undefined clearOverride();
	Promise<undefined> requestOverride(DOMString? value);

	attribute EventHandler onchange;
};
```

### Attributes

#### `override` attribute
- **Type**: `DOMString?` (readonly)
- **Description**: Returns the current override value for the preference, or `null` if no override is set.

#### `value` attribute
- **Type**: `DOMString` (readonly)
- **Description**: Returns the effective value of the preference, which is the override if set, otherwise the user agent's default value.

#### `validValues` attribute
- **Type**: `FrozenArray<DOMString>` (readonly)
- **Description**: Returns the list of valid values for the preference. The valid values depend on the specific preference object (e.g., `reducedData` returns `["reduce", "no-preference"]`).

#### `onchange` event handler attribute
- **Type**: `EventHandler`
- **Description**: Event handler for the `change` event, which is fired when the value of the preference changes.

### Methods

#### `clearOverride()`
- **Return type**: `undefined`
- **Description**: Clears any override that has been set for this preference.

#### `requestOverride(value)`
- **Parameters**:
  - `value` (`DOMString?`) - The new override value, or `null` to clear the override.
- **Return type**: `Promise<undefined>`
- **Description**: Requests an override for the preference. The promise resolves when the override is applied.

### Events

#### `change` event
- **Description**: Fired when the value of the preference changes, either due to an override or a change in the user agent's preference.
```

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

### Invert images and videos when colors are inverted

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

Use this CSS to counteract forced color inversion by inverting images and videos. The @media (inverted-colors) query matches when the user agent or OS has inverted all colors.

```css
@media (inverted-colors) {
  img:not(picture > img), picture, video {
    filter: invert(100%);
  }
}
```

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

### Media query list with invalid query recovers at top-level comma

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

Shows that a grammar mismatch in one media query does not invalidate the entire list; the invalid query is replaced with 'not all' and parsing continues after the top-level comma.

```css
@media (example, all,), speech { /* only applicable to speech devices */ }
@media &test, speech           { /* only applicable to speech devices */ }

```

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

### CSSCustomMediaRule

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

The CSSCustomMediaRule interface represents a @custom-media rule. It provides readonly attributes for the rule's name and query.

```APIDOC
## CSSCustomMediaRule

### Description
The `CSSCustomMediaRule` interface represents a @custom-media rule. It exposes the name and query of the rule.

### Interface
`CSSCustomMediaRule` extends `CSSRule` and is exposed to Window.

### Attributes
- **name** (CSSOMString) - readonly - Returns a CSSOMString representing the <extension-name> of the @custom-media rule.
- **query** (CustomMediaQuery) - readonly - Represents the value of the custom media query. The returned `CustomMediaQuery` will be one of the following:
  - A `MediaList` object, if the rule was defined with a <media-query-list>.
  - The boolean true, if the rule was defined with the value true.
  - The boolean false, if the rule was defined with the value false.

### Type Definition
```
typedef (MediaList or boolean) CustomMediaQuery;
```

### Interface Definition
```
[Exposed=Window]
interface CSSCustomMediaRule : CSSRule {
  readonly attribute CSSOMString name;
  readonly attribute CustomMediaQuery query;
};
```
```

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

### Using the 'only' keyword in a link element

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

The 'only' keyword hides the media query from legacy user agents, causing them to ignore the stylesheet even if they would normally match the screen media type. The keyword has no effect on the query's result for modern user agents.

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

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

### Unknown media feature in link media attribute

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

The media attribute contains an unknown feature 'max-weight', so the entire media query list is reduced to 'not all, (color)', equivalent to just '(color)'.

```html
<link media="screen and (max-weight: 3kg) and (color), (color)"rel="stylesheet" href="example.css" />

```

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

### clearOverride()

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

Clears the override for a user preference. If an override exists and the new value differs from the override, fires a 'change' event.

```APIDOC
## clearOverride()

### Description
Clears the override for a user preference. If an override exists and the new value differs from the override, fires a 'change' event.

### Method
clearOverride()

### Parameters
None.

### Behavior
1. Gets the preference name.
2. If an override exists, gets its value.
3. If no override exists, returns.
4. Clears the override.
5. Gets the new value of the preference.
6. If the new value is equal to the override, fires a 'change' event.

### Events
- **change** - Fired when the computed value changes.
```

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

### @media rule for screen media type

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

Declares a section of a CSS style sheet that applies only to screen media, setting the font family to sans-serif.

```css
@media screen {
  * { font-family: sans-serif }
}

```

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

### CSSCustomMediaRule

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

The CSSCustomMediaRule interface represents a custom media query rule in CSS. It exposes the name of the custom media query and the query itself.

```APIDOC
## CSSCustomMediaRule

### Description
Represents a custom media query rule in CSS. Exposes the name and the query of the custom media.

### Interface
CSSCustomMediaRule : CSSRule

### Exposed
Window

### Attributes
- **name** (CSSOMString) - readonly - The name of the custom media query.
- **query** (CustomMediaQuery) - readonly - The custom media query, which is either a MediaList or a boolean.
```

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

### requestOverride(value)

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

Sets an override for a user preference. It validates the value against allowed values for the preference and rejects with a TypeError if invalid. If the override is cleared (value is null or empty), it clears the override. Fires a 'change' event when the computed value changes.

```APIDOC
## requestOverride(value)

### Description
Sets an override for a user preference. It validates the value against allowed values for the preference and rejects with a TypeError if invalid. If the override is cleared (value is null or empty), it clears the override. Fires a 'change' event when the computed value changes.

### Method
requestOverride(value)

### Parameters
- **value** (string or null) - Required - The value to set as the override. If null or empty string, the override is cleared.

### Behavior
1. Returns a promise.
2. Checks if the request is allowed via a UA-defined algorithm. If not allowed, rejects with a NotAllowedError DOMException.
3. If value is null or empty string, clears the override and resolves.
4. Validates value against the allowed values for the preference (colorScheme, contrast, reducedMotion, reducedTransparency, reducedData). If invalid, rejects with a TypeError DOMException.
5. If the value differs from the previous override, sets the override.
6. If there was no previous override and the value is the same as the current value, fires a 'change' event.
7. Resolves the promise.

### Exceptions
- **NotAllowedError** - If the request is not allowed by the UA.
- **TypeError** - If the value is not in the valid values for the preference.

### Events
- **change** - Fired when the computed value changes, or when a new override is set even if the value hasn't changed.
```

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

### Detect interlaced displays with scan: interlace

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

Applies a sans-serif font to avoid 'twitter' on interlaced screens, such as old CRT and plasma TVs.

```css
@media (scan: interlace) { body { font-family: sans-serif; } }
```

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

### Hide back button when nav-controls: back

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

Use this CSS to hide a custom back button when the user agent already provides a discoverable back control. The @media rule targets the nav-controls feature with the value 'back'.

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

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

### CSS parsing rules truncate media query at semicolon

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

In CSS, the @media rule ends at the semicolon, so the media query 'test;,all' is parsed as 'not all, all' (always true) but the rest becomes an invalid style rule.

```css
@media test;,all { body { background:lime } }

```

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

### Disable shadows when colors are inverted

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

Use this CSS to remove text and box shadows when colors are inverted, as shadows can become highlights and reduce readability.

```css
@media (inverted-colors) {
  * {
    text-shadow: none !important;
    box-shadow: none !important;
  }
}
```

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

### Unclosed parenthesized block turns entire rest into not all

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

An unclosed parenthesis in a media query causes the entire rest of the stylesheet to be treated as part of the invalid block, resulting in a 'not all' media query.

```css
@media (example, speech { /* rules for speech devices */ }

```

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

### reducedData attribute

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

The reducedData attribute is a PreferenceObject used to override the user's preference for reduced data usage. It is modeled after the prefers-reduced-data media feature.

```APIDOC
## reducedData attribute

### Description
The `reducedData` attribute is a `PreferenceObject` that allows overriding the user's preference for reduced data usage. It is modeled after the `prefers-reduced-data` media feature.

### Valid Values
The valid values for `reducedData` are:
- `reduce`
- `no-preference`

### Usage
When an override is set for this preference, the user agent must use the override in all stylesheets applied to an origin, when queried via `matchMedia()`, when sending the `Save-Data` request header, and when calculating the `saveData` attribute of the Save Data API.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.