CSS Media Features

CSS Media Features

Full list of CSS media features. CSS media features are used in media queries, which allow you to apply different styles depending on the capabilities of the output device.

You can use the CSS @media at-rule to create media queries that test for certain media features, then apply styles accordingly.

List of Media Features

Here's a list of media features defined across Media Queries Level 4 (W3C Candidate Recommendation Draft) and Media Queries Level 5 (W3C Working Draft). Features added in Level 5 are noted where applicable.

width
Describes the width of the viewport of the output device. This is a range feature, which means you can also use min-width and max-width, or the modern range syntax such as @media (width >= 1200px).
height
Describes the height of the viewport of the output device. This is a range feature, supporting min-height, max-height, and range syntax.
aspect-ratio
The ratio of the width to the height of the viewport. This is a range feature, so min-aspect-ratio and max-aspect-ratio are also valid.
orientation
Describes the orientation of the viewport. It is portrait when the height is greater than or equal to the width, and landscape otherwise.
resolution
Describes the pixel density of the output device, expressed in dpi, dpcm, or dppx. This is a range feature. The dppx unit is preferred. For example, @media (resolution >= 2dppx) targets high-DPI (Retina) screens.
scan
Describes the scanning process of some output devices (whether it uses interlaced or progressive rendering). Most modern screens use progressive rendering, whereas some older TV screens use interlaced rendering.
grid
Determines whether the output device is grid-based (e.g. a TTY terminal or phone display with only one fixed font) or bitmap-based. Grid devices return 1, all others return 0.
update
Queries the ability of the output device to modify the appearance of content once it has been rendered. It accepts the following values:
none
Once rendered, the layout cannot be updated. Example: a document printed on paper.
slow
The layout may change dynamically but the output device cannot render changes quickly enough to be perceived as smooth animation. Example: e-ink displays.
fast
The layout may change dynamically and the output device is not constrained in speed, so CSS Animations and transitions work as expected. Example: computer screens.
overflow-block
Describes the behavior of the device when content overflows the initial containing block in the block axis.
none
Overflowing content is simply not displayed. Example: billboards.
scroll
Overflowing content is accessible by scrolling. Example: computer screens.
optional-paged
Overflowing content can be scrolled to, but manual page breaks (e.g. via the break-inside property) can cause following content to display on the next page. Example: slideshows.
paged
Content is broken into discrete pages; overflow is displayed on the following page. Example: printers, print preview, e-book readers.
overflow-inline
Describes the behavior of the device when content overflows the initial containing block in the inline axis. If scroll, the user can scroll to overflowing content. If none, overflowing content is not displayed.
color
Describes the number of bits per color component of the output device. For example, @media (color >= 8) { … } matches devices with at least 8 bits per color component. A bare @media (color) { … } matches any color device. If the device is not a color device, the value is zero.

Negative <integer>s are invalid.

color-index
Describes the number of entries in the color lookup table of the output device. If the device does not use a color lookup table, the value is zero.

Negative <integer>s are invalid.

monochrome
Describes the number of bits per pixel in a monochrome frame buffer. If the device is not a monochrome device, the value is 0.

Negative <integer>s are invalid.

color-gamut
Describes the approximate range of colors supported by the user agent and output device. Accepts the following values:
srgb
The device can display approximately sRGB colors or better. The vast majority of modern color displays fall into this category.
p3
The device can display approximately the range of colors specified by the DCI P3 color space or better. This is a wider gamut than sRGB and is common on modern Apple displays and many high-end screens.
rec2020
The device can display approximately the range of colors specified by the ITU-R BT.2020 color space. This is a very wide gamut typically found on professional-grade and high-end consumer displays.
pointer
Queries the presence and accuracy of a pointing device such as a mouse. Reflects the characteristics of the primary pointing device. Values are none, coarse (e.g. a touchscreen), and fine (e.g. a mouse).
hover
Queries whether the primary pointing device allows the user to hover over elements on the page. Values are none and hover.
any-pointer
Same as pointer but applies to any available pointing device, not just the primary one.
any-hover
Same as hover but applies to any available pointing device, not just the primary one.
scripting
Queries whether scripting languages such as JavaScript are supported on the current document. Accepts the following values:
none
Scripting is not supported or not enabled on the current document.
initial-only
Scripting is enabled during the initial page load only, but not afterwards. Example: printed pages where scripts run before printing.
enabled
Scripting is supported and active on the current document.

Added in Media Queries Level 5.

prefers-color-scheme
Detects whether the user has requested a light or dark color theme via their operating system or browser settings. Accepts light or dark. Widely supported across all modern browsers. Added in Media Queries Level 5.
prefers-reduced-motion
Detects whether the user has requested that the system minimize the amount of non-essential motion. Accepts no-preference or reduce. Important for accessibility. Added in Media Queries Level 5.
prefers-contrast
Detects whether the user has requested that the system increase or decrease the amount of contrast between adjacent colors. Accepts no-preference, more, less, and forced. Added in Media Queries Level 5.
prefers-reduced-transparency
Detects whether the user has enabled a setting to reduce the use of transparent or translucent layer effects. Accepts no-preference or reduce. Added in Media Queries Level 5.
prefers-reduced-data
Detects whether the user prefers web content that consumes less internet traffic, for example when on a metered or limited connection. Accepts no-preference or reduce. Added in Media Queries Level 5. Browser support is still limited as of early 2026.
forced-colors
Detects whether the user agent restricts the color palette available to the author, as in Windows High Contrast mode. Accepts none or active. When active, the browser enforces a limited color palette chosen by the user. Added in Media Queries Level 5.
inverted-colors
Queries whether the user agent or underlying operating system is inverting colors on the screen. Accepts none or inverted. Added in Media Queries Level 5.
dynamic-range
Queries the combination of brightness, contrast ratio, and color depth supported by the user agent and output device. Accepts standard or high. Use high to target HDR-capable displays. Added in Media Queries Level 5.
video-dynamic-range
Same as dynamic-range but applies specifically to the video plane of the output device. Added in Media Queries Level 5.
display-mode
Queries the mode in which a web application is being displayed. Accepts fullscreen, standalone, minimal-ui, or browser. Particularly useful for Progressive Web Apps (PWAs) that need to adjust their UI depending on how they are launched. Added in Media Queries Level 5.
shape
Detects the shape of the device display, to distinguish between rectangular and round displays (such as some smartwatches). Accepts rect or round. Added in Media Queries Level 5.
horizontal-viewport-segments
Detects the number of logical segments of the viewport along the horizontal axis, for use with dual-screen or foldable devices that have a horizontal fold or hinge. Accepts an integer value. Added in Media Queries Level 5.
vertical-viewport-segments
Detects the number of logical segments of the viewport along the vertical axis, for use with foldable devices that have a vertical fold or hinge. Accepts an integer value. Added in Media Queries Level 5.

How to Use Media Features

Here's an example of a media query that tests for a minimum viewport width. Media Queries Level 4 introduced a more readable range syntax, now supported in all modern browsers, which can be used as an alternative to the traditional min- and max- prefix approach:

The range syntax also lets you express a range between two values cleanly:

You can combine media features using logical operators and, not, and or:

You can combine media features with media types for extra granularity:

A commonly used pattern with the Level 5 user preference features, important for accessibility and dark mode support:

Related