Center an element - CSS: Cascading Style Sheets

Center an element
=================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
In this recipe, you will see how to center one box inside another by using flexbox and grid. Centering both horizontally and vertically is simple and straightforward.

![an element centered inside a larger box](/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element/cookbook-center.png)

Requirements
------------

To place an item into the center of another box horizontally and vertically.

Recipe
------

Download this example

Using flexbox
-------------

To center a box within another box, first turn the containing box into a flex container by setting its `display` property to `flex`. Then set `align-items` to `center` for vertical centering (on the block axis) and `justify-content` to `center` for horizontal centering (on the inline axis). And that's all it takes to center one box inside another!

### HTML

```html
<div class="container">
  <div class="item">I am centered!</div>
</div>
```

### CSS

```css
div {
  border: solid 3px;
  padding: 1em;
  max-width: 75%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8em;
}
```

We set a height for the container to demonstrate that the inner item is indeed vertically centered within the container.

### Result

Instead of applying `align-items: center;` on the container, you can also vertically center the inner item by setting `align-self` to `center` on the inner item itself.

Using grid
----------

Another method you can use for centering one box inside another is to first make the containing box a grid container and then set its `place-items` property to `center` to center align its items on both the block and inline axes.

### HTML

```html
<div class="container">
  <div class="item">I am centered!</div>
</div>
```

### CSS

```css
div {
  border: solid 3px;
  padding: 1em;
  max-width: 75%;
}
.container {
  display: grid;
  place-items: center;
  height: 8em;
}
```

### Result

Instead of applying `place-items: center;` on the container, you can achieve the same centering by setting `place-content: center;` on the container or by applying either `place-self: center` or `margin: auto;` on the inner item itself.

Resources on MDN
----------------

* Box Alignment in Flexbox
* CSS Box alignment guide


List group with badges - CSS: Cascading Style Sheets

List group with badges
======================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
In this recipe we will create a list group pattern with badges that indicate a count.

![A list of items with a badge indicating a count displayed to the right of the text.](/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges/list-group-badges.png)

Requirements
------------

The list items should be displayed with the badges. The badge should be aligned right and vertically centered. The badge must be centered vertically whether there is a single line of content or multiple lines of text.

Recipe
------

Download this example

Choices made
------------

Flexbox makes this particular pattern straightforward and also facilitates making changes to the layout.

To ensure the text and badge line up correctly, I use the `justify-content` property with a value of `space-between`. This places any extra space between the items. In the live example, if you remove this property, you will see the badge move to the end of the text on items with text shorter than the one line.

To align the content horizontally, I use the `align-items` property to align the text and badge on the cross axis. If you want the badge to align to the top of the content instead, change this to `align-items: flex-start`.

See also
--------

* Box alignment in Flexbox
* Aligning items in a flex container
* CSS flexible box layout module


Pagination - CSS: Cascading Style Sheets

Pagination
==========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
This cookbook pattern demonstrates the navigation pattern used to display pagination, where the user can move between pages of content such as search results.

![Links to sets of pages in a paged listing](/en-US/docs/Web/CSS/Layout_cookbook/Pagination/pagination.png)

Requirements
------------

The pagination pattern typically displays items in a row. To ensure that the pagination is understandable by people using a screen reader, we mark the items up as a list inside a `<nav>` element, and then use CSS to display the layout visually as a row.

Typically, the pagination component will be centered horizontally underneath the content.

Recipe
------

Download this example

Choices made
------------

This pattern is laid out using flexbox — one flex container nested inside another. The `<nav>` element is designated a flex container in order that we can center the list inside using the `justify-content` property.

The list itself also becomes a flex container to lay the items out as a row. To space the items out we can either use a `margin` on the flex items or add a `gap` on the flex container.

```css
.pagination {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
}
```

Accessibility concerns
----------------------

We want to ensure that a person using a screen reader understands what this navigation does, and where they will go when clicking a link. To help with this we have added `aria-label="pagination"` on the `<nav>` element.

We have also added some additional content that would be read by a screen reader but is hidden visually, and set the `aria-hidden` attribute on the paging arrows.

The "See Also" section at the end of this document has links to related accessibility topics.

Specifications
--------------

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-property |

See also
--------

* `justify-content`, `gap`
* Know your ARIA: 'hidden' vs 'none' (2018)
* Invisible content just for screen reader users via WebAIM.org (2020)
* Writing CSS with accessibility in mind (2017)
* a11y style guide: pagination


Recipe: Media objects - CSS: Cascading Style Sheets

Recipe: Media objects
=====================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
The *Media Object* is a pattern we see all over the web. It refers to a two-column box with an image on one side and descriptive text on the other, e.g. a social media post.

![Example of a media object with profile image on the left side and lorem ipsum text to the right filling up 80% of the space](/en-US/docs/Web/CSS/Layout_cookbook/Media_objects/media-object.png)

Requirements
------------

Media Object pattern needs some or all of the following characteristics:

* Stacked on Mobile, two columns on Desktop.
* The image can be on the left or right.
* The image might be small or large.
* Media Objects can be nested.
* The Media Object should clear the contents no matter which side is tallest.
The recipe
----------

Download this example

Choices made
------------

I have chosen to use grid layout for the media object as it allows me to control the layout in two dimensions when I need to. This means that when we have a footer, with short content above, the footer can be pushed down to the bottom of the media object.

Another reason to use grid layout is in order that I can use `fit-content` for the track sizing of the image. By using `fit-content` with a maximum size of 200 pixels, when we have a small image such as the icon, the track only gets as large as the size of that image — the `max-content` size. If the image is larger, the track stops growing at 200 pixels and as the image has a `max-width` of 100% applied, it scales down so that it continues to fit inside the column.

By using `grid-template-areas` to achieve the layout, I can see the pattern in the CSS. I define my grid once we have a max-width of 500 pixels, so on smaller devices the media object stacks.

An option for the pattern is to flip it to switch the image to the other side — this is done by adding the `media-flip` class, which defines a flipped grid template causing the layout to be mirrored.

When we nest one media object inside another we need to place it into the second track in the regular layout, and the first track when flipped.

See also
--------

* `fit-content` property
* Using grid template areas
* CSS grid layout module


Split navigation - CSS: Cascading Style Sheets

Split navigation
================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
The **split navigation** is a navigation pattern where one or more elements are separated from the rest of the navigation items.

![Items separated into two groups.](/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation/split-navigation.png)

Requirements
------------

A common navigation pattern is to have one element pushed away from the others. We can use flexbox to achieve this, without needing to make the two sets of items into two separate flex containers.

Recipe
------

Download this example

Choices made
------------

This pattern combines auto margins with flexbox to split the items.

An auto margin absorbs all available space in the direction it is applied. This is how centering a block with auto margins works — you have a margin on each side of the block trying to take up all of the space, thus pushing the block into the middle.

In this case the left auto margin takes up any available space and pushes the item over to the right. You could apply the class `push` to any item in the list.

See also
--------

* CSS flexible box layout module
* `display` property
* `margin` property


Card - CSS: Cascading Style Sheets

Card
====

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
This pattern is a list of "card" components with optional footers. A card contains a title, an image, a description or other content, and an attribution or footer. Cards are generally displayed within a group or collection.

![Three card components in a row](/en-US/docs/Web/CSS/Layout_cookbook/Card/cards.png)

Requirements
------------

Create a group of cards, with each card component containing a heading, image, content, and, optionally, a footer.

Each card in the group of cards should be the same height. The optional card footer should stick to the bottom of the card.

The cards in the group should line up in two dimensions — both vertically and horizontally.

Recipe
------

Download this example

Choices made
------------

Each card is laid out using CSS Grid Layout despite the layout being one-dimensional. This enables the use of content sizing for the grid tracks. To set up a single-column grid we can use the following:

```css
.card {
  display: grid;
  grid-template-rows: max-content 200px 1fr;
}
```

`display: grid` converts the element into a grid container. The three values of the `grid-template-rows` property divide the grid into a minimum of three rows, defining the height of the first three children of the card, in order.

Each `card` contains a `<header>`, `<image>`, and `<div>`, in that order, with some also containing a `<footer>`.

The heading row, or track, is set to `max-content`, which prevents it from stretching. The image track is set to 200 pixels tall. The third track, where the content lives, is set to `1fr`. This means it will fill any additional space.

Any children beyond the three with explicitly defined sizes create rows in the implicit grid, which fits the content added to it. These are auto-sized by default. If a card contains a footer, it is auto-sized. The footer, when present, sticks to the bottom of the grid. The footer is auto-sized to fit its content; the content `<div>` then stretches take up any additional space.

The following ruleset creates the grid of cards:

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
```

The `grid-template-columns` property defines the widths of the grid columns. In this case, we set the grid to auto-fill, with repeated columns that are minimally `230px` but allowed to grow to fill the available space. The `gap` property sets a gap of `20px` between adjacent rows and adjacent columns.

**Note:** The various elements in separate cards do not align with each other, as each card is an independent grid. Lining up the components in each card with the same components in adjacent cards can be done with subgrid.

Alternative methods
-------------------

Flexbox can also be used to lay out each card. With flexbox, the dimensions of each card's rows are set with the `flex` property on each row, rather than on the card container.

With flexbox, the dimensions of the flex items are defined on the children rather than the parent. Whether you choose to use grid or flexbox depends on your preference, whether you prefer controlling the tracks from the container or prefer adding rules to the items.

We chose grid for the cards as, generally, you want cards to be lined up both vertically and horizontally. Additionally, lining up the components within each card to the components of adjacent cards can be done with subgrid. Flex has no hack-free equivalent to subgrid.

Accessibility concerns
----------------------

Depending on the content of your card, there may be things you could or should do to enhance accessibility. See Inclusive Components: Card by Heydon Pickering, for a very detailed explanation of these issues.

See also
--------

* `grid-template-columns`, `grid-template-rows`, `gap`
* Inclusive Components: Card
* CSS Grid Layout module


Cookbook template - CSS: Cascading Style Sheets

Cookbook template
=================

**Note:** This is a template page for a CSS Cookbook page. Please use this as a raw template when you create a new cookbook page.
 *Comment in italics are information about how to use part of the template.*

*Description of the problem this recipe solves or the pattern you are demonstrating.*

Requirements
------------

*What does this pattern need to include, or what problems does it need to solve? List that here.*

Recipe
------

*Change the path to the example below to point to your merged example. The last parameter is the live example height, which you can change as needed.*

*Change the link to point to your merged download version.*

Download the example

Choices made
------------

*Explain your decisions when creating the pattern. Why did you choose a certain method? If you want to add an additional example here — for example a version with fallbacks, please do. This section is deliberately loose as patterns range from the very simple to more complex.*

Useful fallbacks or alternative methods
---------------------------------------

*If there are useful alternative methods for building the recipe, or fallback recipes to use if you have to support non-supporting browsers, include them in separate sections down here.*

Accessibility concerns
----------------------

*Include this is there are any specific things to watch out for in regard to accessibility. If not relevant for your pattern this can be omitted.*

Browser compatibility
---------------------

*List the key properties you used in the `browser-compat` frontmatter metadata key. Then use the `{{Compat}}` macro in this section to automatically generate a compatibility table for the listed properties.*

See also
--------

* *Links of link of related properties: `example-property`*
* *Links to article showing how to use the property in context: "Using … article"*
* *Very good external links. Don't be afraid of external links, but they should be outstanding, and not only mention minor details.*


hover - CSS: Cascading Style Sheets

hover
=====

The **`hover`** CSS media feature can be used to test whether the user's *primary* input mechanism can hover over elements.

Syntax
------

The `hover` feature is specified as a keyword value chosen from the list below.

`none`

The primary input mechanism cannot hover at all or cannot conveniently hover (e.g., many mobile devices emulate hovering when the user performs an inconvenient long tap), or there is no primary pointing input mechanism.

`hover`

The primary input mechanism can conveniently hover over elements.

Examples
--------

### HTML

```html
<a href="#">Try hovering over me!</a>
```

### CSS

```css
/\* default hover effect \*/
a:hover {
  color: black;
  background: yellow;
}

@media (hover: hover) {
  /\* when hover is supported \*/
  a:hover {
    color: white;
    background: black;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # hover |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media


prefers-reduced-motion - CSS: Cascading Style Sheets

prefers-reduced-motion
======================

**Warning:** An embedded example at the bottom of this page has a scaling movement that may be problematic for some readers. Readers with vestibular motion disorders may wish to enable the reduce motion feature on their device before viewing the animation.

The **`prefers-reduced-motion`** CSS media feature is used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that removes, reduces, or replaces motion-based animations.

Such animations can trigger discomfort for those with vestibular motion disorders. Animations such as scaling or panning large objects can be vestibular motion triggers.

```css
@media (prefers-reduced-motion) {
  /\* styles to apply if a user's device settings are set to reduced motion \*/
}
```

Syntax
------

`no-preference`

Indicates that a user has made no preference known on the device. This keyword value evaluates as false.

`reduce`

Indicates that a user has enabled the setting on their device for reduced motion. This keyword value evaluates as true.

User preferences
----------------

For Firefox, the `reduce` request is honoured if:

* In GTK/GNOME: Settings > Accessibility > Seeing > Reduced animation is turned on.
    + In older versions of GNOME, GNOME Tweaks > General tab (or Appearance, depending on version) > Animations is turned off.
    + Alternatively, add `gtk-enable-animations = false` to the `[Settings]` block of the GTK 3 configuration file.
* In Plasma/KDE: System Settings > Workspace Behavior -> General Behavior > "Animation speed" is set all the way to right to "Instant".
* In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
* In Windows 11: Settings > Accessibility > Visual Effects > Animation Effects
* In macOS: System Preferences > Accessibility > Display > Reduce motion.
* In iOS: Settings > Accessibility > Motion.
* In Android 9+: Settings > Accessibility > Remove animations.
* In Firefox `about:config`: Add a number preference called `ui.prefersReducedMotion` and set its value to either `0` for full animation or to `1` to indicate a preference for reduced motion. Changes to this preference take effect immediately.
Examples
--------

This example uses a scaling animation for the purpose of demonstrating `prefers-reduced-motion`. If you enable the setting for reducing motion in the accessibility preferences on your device, the `prefers-reduced-motion` media query will detect your preference and the CSS within the reduced motion rules, with the same specificity but coming later in the CSS source order, will take precedence. As a result, the animation on the box will tone down to the `dissolve` animation, which is a more muted animation that is not a vestibular motion trigger.

### Toning down the animation scaling

#### HTML

```html
<div class="animation">animated box</div>
```

#### CSS

```css
.animation {
  animation: pulse 1s linear infinite both;
  background-color: purple;
}

/\* Tone down the animation to avoid vestibular motion triggers. \*/
@media (prefers-reduced-motion) {
  .animation {
    animation: dissolve 4s linear infinite both;
    background-color: green;
    text-decoration: overline;
  }
}
```

```
.animation {
  color: #fff;
  font: 1.2em sans-serif;
  width: 10em;
  padding: 1em;
  border-radius: 1em;
  text-align: center;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes dissolve {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
```

#### Result

You can enable the setting for reducing motion on your device to view the change in animation scaling. This example uses the background color and the line over the text to visually highlight when the keyframe animation switches in response to the setting being enabled or disabled.

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # prefers-reduced-motion |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Sec-CH-Prefers-Reduced-Motion` HTTP Header User Agent Client Hint
* An introduction to the reduced motion media query on CSS-Tricks (2019)
* Responsive design for motion on WebKit Blog (2017)


color - CSS: Cascading Style Sheets

color
=====

The **`color`** CSS media feature can be used to test the number of bits per color component (red, green, blue) of the output device.

Syntax
------

The `color` feature is specified as an `<integer>` value that represents the number of bits per color component (red, green, blue) of the output device. If the device is not a color device, the value is zero. It is a range feature, meaning that you can also use the prefixed **`min-color`** and **`max-color`** variants to query minimum and maximum values, respectively.

**Note:** If the various color components are represented by different numbers of bits, the smallest number is used. For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component. If the device uses indexed colors, the minimum number of bits per color component in the color table is used.

See Applying color to HTML elements using CSS to learn more about using CSS to apply color to HTML.

Examples
--------

### HTML

```html
<p>
  This text should be black on non-color devices, red on devices with a low
  number of colors, and greenish on devices with a high number of colors.
</p>
```

### CSS

```css
p {
  color: black;
}

/\* Any color device \*/
@media (color) {
  p {
    color: red;
  }
}

/\* Any color device with at least 8 bits per color component \*/
@media (min-color: 8) {
  p {
    color: #24ba13;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # color |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Applying color to HTML elements using CSS
* The CSS `color` property
* The CSS `<color>` data unit


-webkit-device-pixel-ratio - CSS: Cascading Style Sheets

-webkit-device-pixel-ratio
==========================

The **`-webkit-device-pixel-ratio`** is a non-standard Boolean CSS media feature which is an alternative to the standard `resolution` media feature.

**Note:** If possible, use the `resolution` media feature query instead, which is a standard media feature. While this prefixed media feature is a WebKit feature, other browser engines may support it. See browser compatibility below.

Syntax
------

The `-webkit-device-pixel-ratio` feature is specified as a `<number>` value. It is a range feature, meaning that you can also use the prefixed **`-webkit-min-device-pixel-ratio`** and **`-webkit-max-device-pixel-ratio`** variants to query minimum and maximum values, respectively.

### Values

`<number>`

The number of device pixels used to represent each CSS `px`. Although the value is a `<number>`, and thus doesn't syntactically allow units, its implicit unit is `dppx`.

Implementation
--------------

```css
/\* A unit of "dppx" is implied: \*/
@media (-webkit-min-device-pixel-ratio: 2) {
  /\* … \*/
}
/\* It is equivalent to: \*/
@media (min-resolution: 2dppx) {
  /\* … \*/
}

/\* Similarly: \*/
@media (-webkit-max-device-pixel-ratio: 2) {
  /\* … \*/
}
/\* It is equivalent to: \*/
@media (max-resolution: 2dppx) {
  /\* … \*/
}
```

Examples
--------

### HTML

```html
<p>This is a test of your device's pixel density.</p>
```

### CSS

```css
/\* Exact resolution \*/
@media (-webkit-device-pixel-ratio: 1) {
  p {
    color: red;
  }
}

/\* Minimum resolution \*/
@media (-webkit-min-device-pixel-ratio: 1.1) {
  p {
    font-size: 1.5em;
  }
}

/\* Maximum resolution \*/
@media (-webkit-max-device-pixel-ratio: 3) {
  p {
    background: yellow;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Compatibility Standard # css-media-queries-webkit-device-pixel-ratio |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using media queries
* `<resolution>`
* `-webkit-transform-2d`
* `-webkit-transform-3d`
* `-webkit-transition`
* `-webkit-animation`
* W3C Suggested Method to UnPrefix


-webkit-animation - CSS: Cascading Style Sheets

-webkit-animation
=================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Note:** All browsers support the `animation` property without vendor prefixes. Only WebKit (Safari), and not Chromium, based browsers supports the `-webkit-animation` media feature. No browsers support `animation`, without the prefix, as a media query. Use the `@supports (animation)` feature query instead.

The **`-webkit-animation`** Boolean CSS media feature is a WebKit extension whose value is `true` if vendor-prefixed CSS `animation`s are supported.

Apple has a description in Safari CSS Reference.

**Note:** This media feature is only supported by WebKit. If possible, use an `@supports` feature query instead.

Syntax
------

The `-webkit-animation` media feature is a Boolean whose value is `true` if the vendor-prefixed CSS animation properties are supported *and* the browser supports prefixed property media queries.

### Values

`true`

The browser supports `-webkit` prefixed CSS `animation`.

`false`

The browser doesn't support these prefixed CSS animations.

Examples
--------

### Example of -webkit-animation

```css
@media (-webkit-animation) {
  /\* CSS to use if -webkit- prefixed animations are supported AND the browser supports prefixed properties as media queries \*/
}
```

Specifications
--------------

Not part of any standard.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `-webkit-transform-3d`
* `-webkit-transform-2d`
* `-webkit-transition`
* Test page at quirksmode.org
* `animation` and using CSS animations
* `@media` and Using media queries
* `@supports` and using feature queries


width - CSS: Cascading Style Sheets

width
=====

The **`width`** CSS media feature can be used to test the width of the viewport (or the page box, for paged media).

Syntax
------

The `width` feature is specified as a `<length>` value representing the viewport width. It is a range feature, meaning that you can also use the prefixed **`min-width`** and **`max-width`** variants to query minimum and maximum values, respectively.

Examples
--------

### HTML

```html
<div>Watch this element as you resize your viewport's width.</div>
```

### CSS

```css
/\* Exact width \*/
@media (width: 360px) {
  div {
    color: red;
  }
}

/\* Minimum width \*/
@media (min-width: 35rem) {
  div {
    background: yellow;
  }
}

/\* Maximum width \*/
@media (max-width: 50rem) {
  div {
    border: 2px solid blue;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # width |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using media queries
* @media


overflow-block - CSS: Cascading Style Sheets

overflow-block
==============

The **`overflow-block`** CSS media feature can be used to test how the output device handles content that overflows the initial containing block along the block axis.

Syntax
------

The `overflow-block` feature is specified as a keyword value chosen from the list below.

`none`

Content that overflows the block axis is not displayed.

`scroll`

Content that overflows the block axis can be seen by scrolling to it.

`optional-paged`

Content that overflows the block axis can be seen by scrolling to it, but page breaks can be manually triggered (such as via `break-inside`, etc.) to cause the following content to display on the following page.

`paged`

Content is broken up into discrete pages; content that overflows one page in the block axis is displayed on the following page.

Examples
--------

### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis
  eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in
  faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat,
  tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet
  rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis
  dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend.
  Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt
  sed eget ex.
</p>
```

### CSS

```css
@media (overflow-block: scroll) {
  p {
    color: red;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # mf-overflow-block |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media


grid - CSS: Cascading Style Sheets

grid
====

The **`grid`** CSS media feature can be used to test whether the output device uses a grid-based screen.

Most modern computers and smartphones have bitmap-based screens. Examples of grid-based devices include text-only terminals and basic phones with only one fixed font.

Syntax
------

The `grid` feature is specified as a `<mq-boolean>` value (`0` or `1`) representing whether or not the output device is grid-based.

Examples
--------

### HTML

```html
<p class="unknown">I don't know if you're using a grid device. :-(</p>
<p class="bitmap">You are using a bitmap device.</p>
<p class="grid">You are using a grid device! Neato!</p>
```

### CSS

```css
:not(.unknown) {
  color: lightgray;
}

@media (grid: 0) {
  .unknown {
    color: lightgray;
  }

  .bitmap {
    color: red;
    text-transform: uppercase;
  }
}

@media (grid: 1) {
  .unknown {
    color: lightgray;
  }

  .grid {
    color: black;
    text-transform: uppercase;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # grid |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media


monochrome - CSS: Cascading Style Sheets

monochrome
==========

The **`monochrome`** CSS media feature can be used to test the number of bits per pixel in the monochrome frame buffer of the output device.

Syntax
------

The `monochrome` feature is specified as an `<integer>` representing the number of bits per pixel in the monochrome frame buffer. If the device is not a monochrome device, the value is zero. It is a range feature, meaning that you can also use the prefixed **`min-monochrome`** and **`max-monochrome`** variants to query minimum and maximum values, respectively.

Examples
--------

### HTML

```html
<p class="mono">Your device supports monochrome pixels!</p>
<p class="no-mono">Your device doesn't support monochrome pixels.</p>
```

### CSS

```css
p {
  display: none;
}

/\* Any monochrome device \*/
@media (monochrome) {
  p.mono {
    display: block;
    color: #333;
  }
}

/\* Any non-monochrome device \*/
@media (monochrome: 0) {
  p.no-mono {
    display: block;
    color: #ee3636;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # monochrome |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


pointer - CSS: Cascading Style Sheets

pointer
=======

The **`pointer`** CSS media feature tests whether the user has a pointing device (such as a mouse), and if so, how accurate the *primary* pointing device is.

**Note:** If you want to test the accuracy of *any* pointing device, use `any-pointer` instead.

Syntax
------

The `pointer` feature is specified as a keyword value chosen from the list below.

`none`

The primary input mechanism does not include a pointing device.

`coarse`

The primary input mechanism includes a pointing device of limited accuracy, such as a finger on a touchscreen.

`fine`

The primary input mechanism includes an accurate pointing device, such as a mouse.

Examples
--------

This example creates a small checkbox for users with fine primary pointers and a large checkbox for users with coarse primary pointers.

### HTML

```html
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>
```

### CSS

```css
input[type="checkbox"] {
  appearance: none;
  border: solid;
  margin: 0;
}

input[type="checkbox"]:checked {
  background: gray;
}

@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border-width: 1px;
    border-color: blue;
  }
}

@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
    border-width: 2px;
    border-color: red;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # pointer |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The `any-pointer` media feature


scripting - CSS: Cascading Style Sheets

scripting
=========

The **`scripting`** CSS media feature can be used to test whether scripting (such as JavaScript) is available.

Syntax
------

The `scripting` feature is specified as a keyword value chosen from the list below.

`none`

Scripting is completely unavailable on the current document.

`initial-only`

Scripting is enabled during the initial page load, but not afterwards.

`enabled`

Scripting is supported and active on the current document.

Examples
--------

### HTML

```html
<p class="script-none">You do not have scripting available. :-(</p>
<p class="script-initial-only">
  Your scripting is only enabled during the initial page load. Weird.
</p>
<p class="script-enabled">You have scripting enabled! :-)</p>
```

### CSS

```css
p {
  color: lightgray;
}

@media (scripting: none) {
  .script-none {
    color: red;
  }
}

@media (scripting: initial-only) {
  .script-initial-only {
    color: red;
  }
}

@media (scripting: enabled) {
  .script-enabled {
    color: red;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # scripting |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* @media
* Using media queries


color-index - CSS: Cascading Style Sheets

color-index
===========

The **`color-index`** CSS media feature can be used to test the number of entries in the output device's color lookup table.

Syntax
------

The `color-index` feature is specified as an `<integer>` value representing the number of entries in the output device's color lookup table. (This value is zero if the device does not use such a table.) It is a range feature, meaning that you can also use the prefixed **`min-color-index`** and **`max-color-index`** variants to query minimum and maximum values, respectively.

Examples
--------

### Basic example

#### HTML

```html
<p>This is a test.</p>
```

#### CSS

```css
p {
  color: black;
}

@media (color-index) {
  p {
    color: red;
  }
}

@media (min-color-index: 15000) {
  p {
    color: #1475ef;
  }
}
```

#### Result

### Custom stylesheet

This HTML will apply a special stylesheet for devices that have at least 256 colors.

```html
<link rel="stylesheet" href="http://foo.bar.com/base.css" />
<link
 rel="stylesheet"
 media="all and (min-color-index: 256)"
 href="http://foo.bar.com/color-stylesheet.css" />
```

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # color-index |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media


-moz-device-pixel-ratio - CSS: Cascading Style Sheets

-moz-device-pixel-ratio
=======================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 **Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`-moz-device-pixel-ratio`** Gecko-only CSS media feature can be used to apply styles based on the number of device pixels per CSS pixel.

**Warning:** Do not use this feature. Use the `resolution` feature with the `dppx` unit instead.

**Note:** This media feature is also implemented by WebKit as `-webkit-device-pixel-ratio`. The min and max prefixes as implemented by Gecko are named `min--moz-device-pixel-ratio` and `max--moz-device-pixel-ratio`; but the same prefixes as implemented by Webkit are named `-webkit-min-device-pixel-ratio` and `-webkit-max-device-pixel-ratio`.

Syntax
------

`<number>`

The number of device pixels per CSS pixel.

**Media:** `@media`
**Accepts min/max prefixes:** yes

Examples
--------

### Basic compatibility example

`-moz-device-pixel-ratio` may be used for compatibility with Firefox older than 16, and alongside `-webkit-device-pixel-ratio` for compatibility with WebKit-based browsers that do not support `dppx`.

Example:

```css
/\* First, set for Webkit-based browsers \*/
@media (-webkit-min-device-pixel-ratio: 2),
  (min--moz-device-pixel-ratio: 2) /\* Older Firefox browsers (prior to firefox 16) \*/,
  (min-resolution: 2dppx) /\* The standard way \*/,
  (min-resolution: 192dpi); /\* dppx fallback \*/
```

**Note:** See this CSSWG article for compatibility good practices regarding `resolution` and `dppx`.

Specifications
--------------

Not part of any standard.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media


color-gamut - CSS: Cascading Style Sheets

color-gamut
===========

The **`color-gamut`** CSS media feature is used to apply CSS styles based on the approximate range of color gamut supported by the user agent and the output device.

Syntax
------

The `color-gamut` feature is specified as one of the following keyword values:

`srgb`

The user agent and the output device can support approximately the sRGB gamut or more. This includes the vast majority of color displays.

`p3`

The user agent and the output device can support approximately the gamut specified by the Display P3 color space or more. The P3 gamut is larger than and includes the sRGB gamut.

`rec2020`

The user agent and the output device can support approximately the gamut specified by the ITU-R Recommendation BT.2020 color space or more. The REC. 2020 gamut is larger than and includes the P3 gamut.

Examples
--------

### HTML

```html
<p>This is a test.</p>
```

### CSS

```css
p {
  padding: 10px;
  border: solid;
}

@media (color-gamut: srgb) {
  p {
    background: #f4ae8a;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # color-gamut |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* color() function to specify colors in a defined colorspace.
* @media at-rule that is used to specify the color-gamut expression.
* Using media queries to understand when and how to use a media query.


prefers-contrast - CSS: Cascading Style Sheets

prefers-contrast
================

The **`prefers-contrast`** CSS media feature is used to detect whether the user has requested the web content to be presented with a lower or higher contrast.

Syntax
------

`no-preference`

Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the Boolean context.

`more`

Indicates that user has notified the system that they prefer an interface that has a higher level of contrast.

`less`

Indicates that user has notified the system that they prefer an interface that has a lower level of contrast.

`custom`

Indicates that user has notified the system for using a specific set of colors, and the contrast implied by these colors matches neither `more` nor `less`. This value will match the color palette specified by users of `forced-colors: active`.

User preferences
----------------

Various operating systems do support such preferences and user agents are likely to rely on the settings provided by the operating system.

Examples
--------

This example has an annoying low contrast by default.

### HTML

```html
<div class="contrast">low contrast box</div>
```

### CSS

```css
.contrast {
  width: 100px;
  height: 100px;
  outline: 2px dashed black;
}

@media (prefers-contrast: more) {
  .contrast {
    outline: 2px solid black;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # prefers-contrast |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS forced-colors media query


dynamic-range - CSS: Cascading Style Sheets

dynamic-range
=============

The **`dynamic-range`** CSS media feature can be used to test the combination of brightness, contrast ratio, and color depth that are supported by the user agent and the output device.

**Note:** Some devices have high dynamic range capabilities that are not always 'on' and need to be activated (sometimes programmatically, sometimes by the user, sometimes based on the content). This media feature does not test whether the dynamic range capability is active; it only tests whether the device is capable of high dynamic range visuals.

Syntax
------

The `dynamic-range` feature is specified as a keyword value chosen from the list below.

`standard`

This value matches any visual device and excludes devices lacking visual capabilities. A user agent or an output device that matches `high` will also match the `standard` value.

`high`

This value matches user agents and output devices that support high peak brightness, high contrast ratio, and color depth greater than 24 bit or 8 bit per color component of RGB. **Peak brightness** refers to how bright the brightest point a light-emitting device, such as an LCD screen, can produce. In the case of a light-reflective device, such as paper or e-ink, peak brightness refers to the point that at least absorbs light. **Contrast ratio** refers to the ratio of the luminance of the brightest color to that of the darkest color that the system is capable of producing. Currently, there is no precise way to measure peak brightness and contrast ratio, and the determination of what counts as high peak brightness and high contrast ratio depends on the user agent.

Examples
--------

```css
@media (dynamic-range: standard) {
  p {
    color: red;
  }
}

@media (dynamic-range: high) {
  p {
    color: green;
  }
}
```

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # dynamic-range |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media


-webkit-transition - CSS: Cascading Style Sheets

-webkit-transition
==================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

 **Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

**Note:** All browsers support the `transition` property without vendor prefixes. Only WebKit (Safari), and not Chromium, based browsers support the `-webkit-transition` media feature. No browsers support `transition` without the prefix as a media query (though some browsers do support - `-webkit-transform-3d`). Use the `@supports (transition)` feature query instead.

The **`-webkit-transition`** Boolean non-standardCSS media feature is a WebKit extension whose value is `true` if the browsing context supports CSS transitions.

Apple has a description in Safari CSS Reference; this is now called `transition` there.

**Note:** You should not use this media feature; it was never specified, has never been widely implemented, and has been removed from most browsers. Use a `@supports` feature query instead.

Syntax
------

```css
@media (-webkit-transition) {
  /\* CSS to use if this media feature and prefixed transitions are supported \*/
}
```

Examples
--------

### Use @supports instead

Do not use the `-webkit-transition` media feature. Instead, test for transition support using the CSS `@supports` at-rule, like this:

```css
@supports (transition: initial) {
  /\* CSS to use if transitions are supported \*/
}
```

### Obsolete example

Before this became obsolete, you could use `-webkit-transition` in your CSS like this:

```css
@media (-webkit-transition) {
  /\* CSS to use if transitions are supported \*/
}
```

Specifications
--------------

Not part of any standard.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `-webkit-transform-3d`
* `-webkit-transform-2d`
* `-webkit-animation`
* Test page at quirksmode.org
* `transition` and using CSS transitions
* `@media` and Using media queries
* `@supports` and using feature queries


update - CSS: Cascading Style Sheets

update
======

The **`update`** CSS media feature can be used to test how frequently (if at all) the output device is able to modify the appearance of content once rendered.

```css
@media (update: < none | slow | fast >) {
  /\* styles to apply if the update frequency of the output device is a match \*/
}
```

Syntax
------

The `update` feature is specified as a single keyword value chosen from the list below.

`none`

Once it has been rendered, the layout can no longer be updated. Example: documents printed on paper.

`slow`

The layout may change dynamically according to the usual rules of CSS, but the output device is not able to render or display changes quickly enough for them to be perceived as a smooth animation. Examples: e-book readers or severely underpowered devices.

`fast`

The layout may change dynamically according to the usual rules of CSS, and the output device is not unusually constrained in speed, so regularly-updating things like CSS Animations can be used. Example: computer screens.

Examples
--------

### HTML

```html
<p>
  If this text animates for you, your browser supports `update` and you are
  using a fast-updating device.
</p>
```

### CSS

```css
@keyframes jiggle {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(25px);
  }
}

@media (update: fast) {
  p {
    animation: 1s jiggle linear alternate infinite;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # update |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media


device-height - CSS: Cascading Style Sheets

device-height
=============

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Note:** To query for the height of the viewport, developers should use the `height` media feature instead.

The **`device-height`** CSS media feature can be used to test the height of an output device's rendering surface.

Syntax
------

The `device-height` feature is specified as a `<length>` value. It is a range feature, meaning that you can also use the prefixed **`min-device-height`** and **`max-device-height`** variants to query minimum and maximum values, respectively.

Examples
--------

### Applying a special stylesheet for devices that are shorter than 800 pixels

```html
<link
 rel="stylesheet"
 media="screen and (max-device-height: 799px)"
 href="http://foo.bar.com/short-styles.css" />
```

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # device-height |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media


display-mode - CSS: Cascading Style Sheets

display-mode
============

The **`display-mode`** CSS media feature can be used to test the display mode of an application. You can use it to provide a consistent user experience between launching a site from a URL and launching it from a desktop icon.

This feature corresponds to the Web app manifest's `display` member. Both apply to the top-level browsing context and any child browsing contexts. The feature query applies regardless of whether a web app manifest is present.

Syntax
------

The `display-mode` feature is specified as a keyword value chosen from the list below.

| Display mode | Description | Fallback display mode |
| --- | --- | --- |
| `fullscreen` | All of the available display area is used and no user agent chrome is shown. | `standalone` |
| `standalone` | The application will look and feel like a standalone application. This can include the application having a different window, its own icon in the application launcher, etc. In this mode, the user agent will exclude UI elements for controlling navigation, but can include other UI elements such as a status bar. | `minimal-ui` |
| `minimal-ui` | The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation. The elements will vary by browser. | `browser` |
| `browser` | The application opens in a conventional browser tab or new window, depending on the browser and platform. | (none) |
| `window-controls-overlay` | In this mode, the application looks and feels like a standalone desktop application, and the Window Controls Overlay feature is enabled. | (none) |

Examples
--------

### The CSS is used if the device is at fullscreen

```css
@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}
```

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # display-mode |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media


device-aspect-ratio - CSS: Cascading Style Sheets

device-aspect-ratio
===================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Note:** To query for the aspect ratio of the viewport, developers should use the `aspect-ratio` media feature instead.

The **`device-aspect-ratio`** CSS media feature can be used to test the width-to-height aspect ratio of an output device.

Syntax
------

The `device-aspect-ratio` feature is specified as a `<ratio>`. It is a range feature, meaning that you can also use the prefixed **`min-device-aspect-ratio`** and **`max-device-aspect-ratio`** variants to query minimum and maximum values, respectively.

Examples
--------

### Using min-device-aspect-ratio

```css
article {
  padding: 1rem;
}

@media screen and (min-device-aspect-ratio: 16/9) {
  article {
    padding: 1rem 5vw;
  }
}
```

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # device-aspect-ratio |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


forced-colors - CSS: Cascading Style Sheets

forced-colors
=============

The **`forced-colors`** CSS media feature is used to detect if the user agent has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page. An example of a forced colors mode is Windows High Contrast mode.

Syntax
------

The `forced-colors` media feature indicates whether or not the browser is currently in forced-colors mode.

### Values

`none`

Forced colors mode is not active; the page's colors are not being forced into a limited palette.

`active`

Indicates that forced colors mode is active. The browser provides the color palette to authors through the CSS system color keywords and, if appropriate, triggers the appropriate value of `prefers-color-scheme` so that authors can adapt the page. The browser selects the value for `prefers-color-scheme` based on the lightness of the `Canvas` system color (see the color adjust spec for more details).

Usage notes
-----------

### Properties affected by forced-color mode

In forced colors mode, the values of the following properties are treated as if they have no author-level values specified. That is, browser-specified values are used instead. The browser-specified values do not affect the style cascade; the values are instead forced by the browser at paint time.

These browser-specified values are selected from the set of system colors — this ensures a consistent contrast for common UI elements for users that have forced colors enabled.

* `color`
* `background-color`
* `text-decoration-color`
* `text-emphasis-color`
* `border-color`
* `outline-color`
* `column-rule-color`
* `-webkit-tap-highlight-color`
* SVG fill attribute
* SVG stroke attribute

Additionally the following properties have special behavior in forced colors mode:

* `box-shadow` is forced to 'none'
* `text-shadow` is forced to 'none'
* `background-image` is forced to 'none' for values that are not url-based
* `color-scheme` is forced to 'light dark'
* `scrollbar-color` is forced to 'auto'

The system colors that are forced for the above properties depend on the context of the element. For example the `color` property on button element will be forced to `ButtonText`. On normal text it will be forced to `CanvasText`. See the list of system colors for additional details of when each might be appropriate in various UI contexts.

**Note:** user agents choose system colors based on native element semantics, *not* on added ARIA roles.
 As an example, adding `role="button"` to a `div` will **not** cause an element's color to be forced to `ButtonText`

In addition to these adjustments, browsers will help ensure text legibility by drawing "backplates" behind text. This is particularly important for preserving contrast when text is placed on top of images.

There are two cases where the user agent does not force the values for the above properties — when a `forced-color-adjust` value of `none` is applied to an element, or when a system color is specified by the author.

When forced-color-adjust is set to `none` on an element, none of the forced color values will apply, and author styles will be applied as normal. Additionally, the backplate for text will be disabled.

When a system color is specified, it will be used instead of the value that would otherwise have been forced.

You can also use system colors with any property *other* than those listed above, to ensure that the rest of the page integrates with the restricted color palette available in forced colors mode.

### Accessibility concerns

In general, web authors should **not** be using the `forced-colors` media feature to create a separate design for users with this feature enabled. Instead, its intended usage is to make small tweaks to improve usability or legibility when the default application of forced colors does not work well for a given portion of a page.

The high contrast provided by forced colors mode's reduced palette and text backplates is often essential for some users to be able to read or use a given website, so adjustments that affect content should be chosen carefully and targeted to content that is otherwise not legible.

### User preferences

This media feature is active only if the user has enabled color scheme preferences in their operating system. One example of such a feature is High Contrast mode on Windows.

Examples
--------

**Note:** The below example will only work when using a browser that supports this media feature, and with a preference such as High Contrast mode enabled in your OS.

This example is a button that normally gets its contrast via `box-shadow`. Under forced colors mode, box-shadow is forced to none, so the example uses the forced-colors media feature to ensure there is a border of the appropriate color (ButtonText in this case)

### HTML

```html
<button class="button">Press me!</button>
```

### CSS

```css
.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /\* Use a border instead, since box-shadow is forced to 'none' in forced-colors mode \*/
    border: 2px ButtonText solid;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # forced-colors |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* @media
* Styling for Windows high contrast with standards for forced colors.
* `forced-color-adjust`


orientation - CSS: Cascading Style Sheets

orientation
===========

The **`orientation`** CSS media feature can be used to test the orientation of the viewport (or the page box, for paged media).

**Note:** This feature does not correspond to *device* orientation. Opening the soft keyboard on many devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.

Syntax
------

The `orientation` feature is specified as a keyword value chosen from the list below.

### Keyword values

`portrait`

The viewport is in a portrait orientation, i.e., the height is greater than or equal to the width.

`landscape`

The viewport is in a landscape orientation, i.e., the width is greater than the height.

Examples
--------

### Portrait orientation

In this example we have three boxes in the HTML, and use the `orientation` media feature to switch between a row layout (in landscape) and a column layout (in portrait).

The example output is embedded in an `<iframe>` whose height is greater than its width, so the boxes get a column layout.

#### HTML

```html
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
```

#### CSS

```css
body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}
```

#### Result

### Landscape orientation

This example has exactly the same code as the previous example: it has three boxes in the HTML, and uses the `orientation` media feature to switch between a row layout (in landscape) and a column layout (in portrait).

However, in this example, the example output is embedded in an `<iframe>` whose height is less than its width, so the boxes get a row layout.

#### HTML

```html
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
```

#### CSS

```css
body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}
```

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # orientation |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


aspect-ratio - CSS: Cascading Style Sheets

aspect-ratio
============

The **`aspect-ratio`** CSS media feature can be used to test the aspect ratio of the viewport.

Syntax
------

The `aspect-ratio` feature is specified as a `<ratio>` value representing the width-to-height aspect ratio of the viewport. It is a range feature, meaning you can also use the prefixed **`min-aspect-ratio`** and **`max-aspect-ratio`** variants to query minimum and maximum values, respectively.

Examples
--------

The example below is contained in an `<iframe>`, which creates its own viewport. Resize the `<iframe>` to see `aspect-ratio` in action.

Note that, when none of the media query conditions are true, the background will turn white because none of the below rules will be applied to the `<div>` inside the `<iframe>`. See if you can find which width and height values trigger this!

### HTML

```html
<div id="inner">
  Watch this element as you resize your viewport's width and height.
</div>
```

### CSS

```css
/\* Minimum aspect ratio \*/
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /\* blue \*/
  }
}

/\* Maximum aspect ratio \*/
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff; /\* cyan \*/
  }
}

/\* Exact aspect ratio, put it at the bottom to avoid override\*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /\* red \*/
  }
}
```

### Result
```

<label id="wf" for="w">width:165</label>
<input id="w" name="w" type="range" min="100" max="250" step="5" value="165" />
<label id="hf" for="w">height:165</label>
<input id="h" name="h" type="range" min="100" max="250" step="5" value="165" />

<iframe
 id="outer"
 srcdoc="<style> @media (min-aspect-ratio: 8/5) { div { background: #9af; } } @media (max-aspect-ratio: 3/2) { div { background: #9ff; } } @media (aspect-ratio: 1/1) { div { background: #f9a; } }</style><div id='inner'> Watch this element as you resize your viewport's width and height.</div>">
</iframe>
```

```
iframe {
  display: block;
}
```

```
outer.style.width = outer.style.height = "165px";

w.onchange = w.oninput = () => {
  outer.style.width = `${w.value}px`;
  wf.textContent = `width: ${w.value}`;
};
h.onchange = h.oninput = () => {
  outer.style.height = `${h.value}px`;
  hf.textContent = `height: ${h.value}`;
};
```

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # aspect-ratio |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media


-webkit-transform-3d - CSS: Cascading Style Sheets

-webkit-transform-3d
====================

The **`-webkit-transform-3d`** Boolean CSS media feature is a WebKit extension whose value is `true` if vendor-prefixed CSS 3D `transform`s are supported.

**Note:** While this media feature is currently supported by most browsers. If possible, use an `@supports` feature query instead.

Syntax
------

`-webkit-transform-3d` is a Boolean CSS media feature whose value is `true` if the browser supports `-webkit` prefixed CSS 3D `transform`s.

### Values

`true`

The browser supports the 3D CSS transforms with the `-webkit` prefix and supports non-standard, prefixed media queries.

`false`

The 3D CSS transforms prefixed with `-webkit` are not supported by the browser.

Examples
--------

### Examples of media queries with -webkit-transform-3d

```css
@media (-webkit-transform-3d) {
  .foo {
    transform-style: preserve-3d;
  }
}
```

A better method for checking for browser support is using a feature query:

```css
@supports (transform-style) {
  .foo {
    transform-style: preserve-3d;
  }
}
```

Specifications
--------------

| Specification |
| --- |
| Compatibility Standard # css-media-queries-webkit-transform-3d |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `-webkit-transform-2d`
* `-webkit-transition`
* `-webkit-animation`
* Test page at quirksmode.org
* `transform` and using CSS transforms
* `@media` and Using media queries
* `@supports` and using feature queries


prefers-reduced-transparency - CSS: Cascading Style Sheets

prefers-reduced-transparency
============================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`prefers-reduced-transparency`** CSS media feature is used to detect if a user has enabled a setting on their device to reduce the transparent or translucent layer effects used on the device. Switching on such a setting can help improve contrast and readability for some users.

Syntax
------

`no-preference`

Indicates that a user has made no preference known on the device. This keyword value evaluates as false in the boolean context.

`reduce`

Indicates that a user has enabled the setting on their device to minimize the amount of transparent or translucent layer effects.

User preferences
----------------

 Various operating systems provide a preference for reducing transparency, and user agents are likely to rely on these system settings.
 They may also rely on less explicit signals on platforms which don't offer a specific setting.

* In Windows 10/11: Settings > Personalization > Colors > Transparency effects.
* In macOS: System Preferences > Accessibility > Display > Reduce transparency.
* In iOS: Settings > Accessibility > Display & Text Size > Reduce Transparency.
Examples
--------

This example has a translucent box by default. If the setting to reduce transparency is enabled in the accessibility preferences on your device, the translucent box becomes more opaque.

### HTML

```html
<div class="translucent">translucent box</div>
```

### CSS

```css
.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}
```

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # prefers-reduced-transparency |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS prefers-reduced-motion media query
* Using media queries


-webkit-transform-2d - CSS: Cascading Style Sheets

-webkit-transform-2d
====================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

**Note:** All browsers support the `transform` property without vendor prefixes. Only WebKit (Safari), and not Chromium, based browsers supports the `-webkit-transform-2d` media feature. No browsers support `transform`, without the prefix or `2d` extension, as a media query. Use the `@supports (transform)` feature query instead.

The **`-webkit-transform-2d`** Boolean CSS media feature is a WebKit extension whose value is `true` if vendor-prefixed CSS 2D `transform`s and non-standard vendor-prefixed media queries are supported.

Apple has a description in Safari CSS Reference.

Syntax
------

`-webkit-transform-2d` is a Boolean CSS media feature whose value is `true` if the browser supports `-webkit` prefixed CSS 2D `transform`s.

### Values

`true`

The browser supports the 2D CSS transforms with the `-webkit` prefix.

`false`

The 2D CSS transforms prefixed with `-webkit` are not supported by the browser.

Examples
--------

### Basic example

```css
@media (-webkit-transform-2d) {
  div {
    -webkit-transform: translate(100px, 100px);
  }
}
```

This media feature is only supported by WebKit. The unprefixed `transform` property is supported in all modern browsers. If possible, use an `@supports` feature query instead:

```css
@supports (-webkit-transform: translate(100px, 100px)) {
  div {
    -webkit-transform: translate(100px, 100px);
  }
}
```

Specifications
--------------

Not part of any standard.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `-webkit-transform-3d`
* `-webkit-transition`
* `-webkit-animation`
* Test page at quirksmode.org
* `transform` and using CSS transforms
* `@media` and Using media queries
* `@supports` and using feature queries


prefers-reduced-data - CSS: Cascading Style Sheets

prefers-reduced-data
====================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

**Note:** This feature is not supported by any user agent and its specifics are subject to change.

The **`prefers-reduced-data`** CSS media feature is used to detect if the user has requested the web content that consumes less internet traffic.

Syntax
------

`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 expressed the preference for lightweight alternate content.

User preferences
----------------

Currently no user agent implements this feature, although various operating systems do support such preferences and if this media query is ever implemented user agents will likely rely on the settings provided by the operating system.

Examples
--------

**Note:** No browser currently implements this feature so the following example will not work.

In this example the `montserrat-regular.woff2` font file will neither be preloaded nor downloaded if the user prefers reduced data, in this case the "system font stack" will serve as the fallback font:

### HTML

```html
<head>
  <link
 rel="preload"
 href="fonts/montserrat-regular.woff2"
 as="font"
 media="(prefers-reduced-data: no-preference)"
 crossorigin />
  <link rel="stylesheet" href="style.css" />
</head>
```

### CSS

```css
@media (prefers-reduced-data: no-preference) {
  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    /\* latin \*/
    src:
      local("Montserrat Regular"),
      local("Montserrat-Regular"),
      url("fonts/montserrat-regular.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
      U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
      U+2212, U+2215, U+FEFF, U+FFFD;
  }
}

body {
  font-family:
    Montserrat,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    "Microsoft YaHei",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}
```

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # prefers-reduced-data |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Save-Data` HTTP header


any-hover - CSS: Cascading Style Sheets

any-hover
=========

The **`any-hover`** CSS media feature can be used to test whether *any* available input mechanism can hover over elements.

Syntax
------

The `any-hover` feature is specified as a keyword value chosen from the list below.

`none`

None of the available input mechanism(s) can hover conveniently, or there is no pointing input mechanism.

`hover`

One or more available input mechanisms can conveniently hover over elements.

Examples
--------

### Testing whether input methods can hover

#### HTML

```html
<a href="#">Try hovering over me!</a>
```

#### CSS

```css
@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}
```

#### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # any-input |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* the `hover` media feature


height - CSS: Cascading Style Sheets

height
======

The **`height`** CSS media feature can be used to apply styles based on the height of the viewport (or the page box, for paged media).

Syntax
------

The `height` feature is specified as a `<length>` value representing the viewport height. It is a range feature, meaning that you can also use the prefixed **`min-height`** and **`max-height`** variants to query minimum and maximum values, respectively.

Examples
--------

### HTML

```html
<div>Watch this element as you resize your viewport's height.</div>
```

### CSS

```css
/\* Exact height \*/
@media (height: 360px) {
  div {
    color: red;
  }
}

/\* Minimum height \*/
@media (min-height: 25rem) {
  div {
    background: yellow;
  }
}

/\* Maximum height \*/
@media (max-height: 40rem) {
  div {
    border: 2px solid blue;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # height |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using media queries
* @media


prefers-color-scheme - CSS: Cascading Style Sheets

prefers-color-scheme
====================

 The **`prefers-color-scheme`** CSS media feature is used to detect if a user has requested light or dark color themes.
 A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.

Embedded elements
-----------------

 For SVG and iframes, `prefers-color-scheme` lets you set a CSS style for the SVG or iframe based on the `color-scheme` of the parent element in the web page.
 SVGs must be used embedded (i.e., `<img src="circle.svg" alt="circle" />`) as opposed to inlined in HTML.
 An example of using `prefers-color-scheme` in SVGs can be found in the Color scheme inheritance section.

 Using `prefers-color-scheme` is allowed in cross-origin `<svg>` and `<iframe>` elements. Cross-origin elements are elements retrieved from a different host than the page that is referencing them.
 To learn more about SVGs, see the SVG documentation and for more information about iframes, see the iframe documentation.

Syntax
------

`light`

Indicates that user has notified that they prefer an interface that has a light theme, or has not expressed an active preference.

`dark`

Indicates that user has notified that they prefer an interface that has a dark theme.

Examples
--------

### Detecting a dark or light theme

A common usage is to use a light color scheme by default, and then use `prefers-color-scheme: dark` to override the colors to a darker variant. It is also possible to do it the other way around.

This example shows both options: Theme A uses light colors, but can be overridden to dark colors. Theme B uses dark colors, but can be overridden to light colors. In the end, if the browser supports `prefers-color-scheme`, both themes will be light or dark.

#### HTML

```html
<div class="box theme-a">Theme A (initial)</div>
<div class="box theme-a adaptive">Theme A (changed if dark preferred)</div>
<br />

<div class="box theme-b">Theme B (initial)</div>
<div class="box theme-b adaptive">Theme B (changed if light preferred)</div>
```

#### CSS
```

div.box {
  display: inline-block;
  padding: 1em;
  margin: 6px;
  outline: 2px solid #000;
  width: 12em;
  height: 2em;
  vertical-align: middle;
}
```

Theme A (brown) uses a light color scheme by default, but will switch to a dark scheme based on the media query:

```css
.theme-a {
  background: #dca;
  color: #731;
}
@media (prefers-color-scheme: dark) {
  .theme-a.adaptive {
    background: #753;
    color: #dcb;
    outline: 5px dashed #000;
  }
}
```

Theme B (blue) uses a dark color scheme by default, but will switch to a light scheme based on the media query:

```css
.theme-b {
  background: #447;
  color: #bbd;
}
@media (prefers-color-scheme: light) {
  .theme-b.adaptive {
    background: #bcd;
    color: #334;
    outline: 5px dotted #000;
  }
}
```

#### Result

The left boxes shows Theme A and Theme B as they would appear without the `prefers-color-scheme` media query. The right boxes show the same themes, but one of them will be changed to a darker or lighter variant based on the user's active color scheme. The outline of one box will be dashed or dotted if it was changed based on your browser or operating systems settings.

### Color scheme inheritance

 The following example shows how to use `prefers-color-scheme` with the `color-scheme` property inherited from a parent element.
 A script is used to set the source of the `<img>` elements and their `alt` attributes. This would normally be done in HTML as `<img src="circle.svg" alt="circle" />`.

 You should see three circles, with one drawn in a different color.
 The first circle inherits the `color-scheme` from the OS and can be toggled using the system OS's theme switcher.

 The second and third circles inherit the `color-scheme` from the embedding element; the `@media` query allows setting styles of the SVG content based on the parent element's `color-scheme`.
 In this case, the parent element with a `color-scheme` CSS property is a `<div>`.

```html
<div>
  <img />
</div>

<div style="color-scheme: light">
  <img />
</div>
<div style="color-scheme: dark">
  <img />
</div>

<!-- Embed an SVG for all <img> elements -->
<script>
 for (let img of document.querySelectorAll("img")) {
 img.alt = "circle";
 img.src =
 "data:image/svg+xml;base64," +
 btoa(`
 <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
 <style>
 :root { color: blue }
 @media (prefers-color-scheme: dark) {
 :root { color: purple }
 }
 </style>
 <circle fill="currentColor" cx="16" cy="16" r="16"/>
 </svg>
 `);
 }
</script>
```

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # prefers-color-scheme |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `color-scheme` CSS property
* `Sec-CH-Prefers-Color-Scheme` HTTP Header User Agent Client Hint
* Simulate prefers-color-scheme in Firefox (Firefox Page Inspector > Examine and edit CSS)
* Video tutorial: Coding a Dark Mode for your Website
* Redesigning your product and website for dark mode
* Changing color schemes in Windows, macOS, Android, or other platforms.


any-pointer - CSS: Cascading Style Sheets

any-pointer
===========

The **`any-pointer`** CSS media feature tests whether the user has *any* pointing device (such as a mouse), and if so, how accurate it is.

**Note:** If you want to test the accuracy of the *primary* pointing device, use `pointer` instead.

Syntax
------

The `any-pointer` feature is specified as a keyword value chosen from the list below.

`none`

No pointing device is available.

`coarse`

At least one input mechanism includes a pointing device of limited accuracy.

`fine`

At least one input mechanism includes an accurate pointing device.

**Note:** More than one value can match if the available devices have different characteristics, although `none` only matches when none of them are pointing devices.

Examples
--------

This example creates a small checkbox for users with at least one fine pointer and a large checkbox for users with at least one coarse pointer. The big checkbox takes precedence because it is declared after the small one.

### HTML

```html
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>
```

### CSS

```css
input[type="checkbox"]:checked {
  background: gray;
}

@media (any-pointer: fine) {
  input[type="checkbox"] {
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid blue;
  }
}

@media (any-pointer: coarse) {
  input[type="checkbox"] {
    appearance: none;
    width: 30px;
    height: 30px;
    border: 2px solid red;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # any-input |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The `pointer` media feature


device-width - CSS: Cascading Style Sheets

device-width
============

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Note:** To query for the width of the viewport, developers should use the `width` media feature instead.

The **`device-width`** CSS media feature can be used to test the width of an output device's rendering surface.

Syntax
------

The `device-width` feature is specified as a `<length>` value. It is a range feature, meaning that you can also use the prefixed **`min-device-width`** and **`max-device-width`** variants to query minimum and maximum values, respectively.

Examples
--------

### Applying a special stylesheet for devices that are narrower than 800 pixels

```html
<link
 rel="stylesheet"
 media="screen and (max-device-width: 799px)"
 href="http://foo.bar.com/narrow-styles.css" />
```

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # device-width |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media


aural - CSS: Cascading Style Sheets

aural
=====

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The `aural` CSS media type is used for devices that have speech output capabilities.

Syntax
------

The `aural` CSS media type was used to specify a block of CSS that applied only when the content is being presented using a speech synthesis device.

```css
@media aural {
  /\* speech-specific styles here \*/
}
```

Examples
--------

### Basic example

```css
@media aural {
  body {
    voice-family: Paul;
  }
}
```

Specifications
--------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification  |

See also
--------

* Media queries
* Using media queries
* `@media`


overflow-inline - CSS: Cascading Style Sheets

overflow-inline
===============

The **`overflow-inline`** CSS media feature can be used to test how the output device handles content that overflows the initial containing block along the inline axis.

Syntax
------

The `overflow-inline` feature is specified as a keyword value chosen from the list below.

`none`

Content that overflows the inline axis is not displayed.

`scroll`

Content that overflows the inline axis can be seen by scrolling to it.

Examples
--------

### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis
  eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in
  faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat,
  tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet
  rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis
  dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend.
  Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt
  sed eget ex.
</p>
```

### CSS

```css
p {
  white-space: nowrap;
}

@media (overflow-inline: scroll) {
  p {
    color: red;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # mf-overflow-inline |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


video-dynamic-range - CSS: Cascading Style Sheets

video-dynamic-range
===================

The **`video-dynamic-range`** CSS media feature can be used to test the combination of brightness, contrast ratio, and color depth that are supported by the video plane of the user agent and the output device.

Some user agents, including many TVs, render video and graphics in two separate planes (bi-plane) with distinct screen characteristics. The `video-dynamic-range` feature is used to test the characteristics in the video plane.

Syntax
------

The `video-dynamic-range` feature is specified as a keyword value chosen from the list below.

`standard`

This value matches any visual device and excludes devices lacking visual capabilities. A user agent or an output device that matches `high` will also match the `standard` value.

`high`

This value matches user agents and output devices that support high peak brightness, high contrast ratio, and color depth greater than 24 bit or 8 bit per color component of RGB. **Peak brightness** refers to how bright the brightest point a light-emitting device, such as an LCD screen, can produce. In the case of a light-reflective device, such as paper or e-ink, peak brightness refers to the point that at least absorbs light. **Contrast ratio** refers to the ratio of the luminance of the brightest color to that of the darkest color that the system is capable of producing. Currently, there is no precise way to measure peak brightness and contrast ratio, and the determination of what counts as high peak brightness and high contrast ratio depends on the user agent.

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # video-dynamic-range |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Media Queries
* @media


shape - CSS: Cascading Style Sheets

shape
=====

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The `shape` CSS media feature can be used to test the shape of the device to distinguish rectangular and round displays.

Syntax
------

The `shape` discrete feature is specified as one of two acceptable strings, either `rect` representing a rectangular screen or `round` representing a circular, oval or elliptical screen.

`rect`

The shape is an axis aligned rectangle or square, or a similar shape such as rounded rectangle for which the traditional designs are appropriate.

`round`

The shape is rounded or a similar shape to the circle such as an oval, an ellipse for which distinctively rounded designs are appropriate.

Examples
--------

### Basic example

#### HTML

```html
<h1>Hello World!</h1>
```

#### CSS

```css
h1 {
  text-align: left;
}

@media (shape: rect) {
  h1 {
    text-align: left;
  }
}

@media (shape: round) {
  h1 {
    text-align: center;
  }
}
```

### Custom stylesheet

This HTML will apply a special stylesheet for devices that have round screens.

```html
<head>
  <link rel="stylesheet" href="default.css" />
  <link
 media="screen and (shape: rect)"
 rel="stylesheet"
 href="rectangle.css" />
  <link media="screen and (shape: round)" rel="stylesheet" href="round.css" />
</head>
```

Specifications
--------------

| Specification |
| --- |
| CSS Round Display Level 1 # shape-media-feature |

Browser compatibility
---------------------

There is no browser implementing this feature.

See also
--------

* Using Media Queries
* @media


inverted-colors - CSS: Cascading Style Sheets

inverted-colors
===============

The **`inverted-colors`** CSS media feature is used to test if the user agent or the underlying operating system has inverted all colors.

Inversion of colors can have unpleasant side effects, such as shadows turning into highlights, which can reduce the readability of the content. Using this media feature, you can detect if inversion is happening and style the content accordingly while respecting user preference.

Syntax
------

```css
/\* Keyword value \*/
@media (inverted-colors: inverted) {
  /\* styles to apply if inversion of colors is detected \*/
}
```

The `inverted-colors` feature is specified as one of the following keyword values:

`none`

Indicates that the colors are displayed normally and no inversion of colors has happened. This keyword value evaluates as false.

`inverted`

Indicates that all pixels within the displayed area have been inverted. This keyword value evaluates as true.

Examples
--------

### Applying styles if color inversion is detected

This example demonstrates the effects of both `inverted-colors` media feature keyword values and when the `inverted-colors` media feature is not supported.

#### HTML

```html
<p>
  If color inversion is detected, this text will appear blue on white (the
  inverse of yellow on black) along with a line over the text. If no color
  inversion is happening, the text will appear red on light gray without the
  line over the text.
</p>
<p>
  If the text is gray and no overline is present, it means your browser doesn't
  support the
  <code>inverted-colors</code> media feature.
</p>
```

#### CSS

```css
p {
  color: gray;
}

@media (inverted-colors: inverted) {
  p {
    background: black;
    color: yellow;
    text-decoration: overline;
  }
}

@media (inverted-colors: none) {
  p {
    background: #eee;
    color: red;
  }
}
```

#### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # inverted |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* @media
* CSS media queries module
* Using media queries


resolution - CSS: Cascading Style Sheets

resolution
==========

The **`resolution`** CSS media feature can be used to test the pixel density of the output device.

Syntax
------

The `resolution` feature is specified as a `<resolution>` value representing the pixel density of the output device. It is a range feature, meaning that you can also use the prefixed **`min-resolution`** and **`max-resolution`** variants to query minimum and maximum values, respectively.

Examples
--------

### HTML

```html
<p>This is a test of your device's pixel density.</p>
```

### CSS

```css
/\* Exact resolution \*/
@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

/\* Minimum resolution \*/
@media (min-resolution: 72dpi) {
  p {
    text-decoration: underline;
  }
}

/\* Maximum resolution \*/
@media (max-resolution: 300dpi) {
  p {
    background: yellow;
  }
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # resolution |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `window.devicePixelRatio`
* The `image-resolution` property