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 in Media Queries Level 4 (W3C Working Draft).

width

Describes the width of the targeted display area of the output device. This is a range value, which means that you can also use min-width.

height

Describes the height of the targeted display area of the output device. This is a range value, which means that you can also use min-height.

aspect-ratio

The ratio of the value of the width media feature to the value of the height media feature.

orientation

Describes the orientation of the device. It is portrait when the value of the height media feature is greater than or equal to the value of the width media feature.

resolution

Describes the resolution of the output device (i.e. the density of the pixels).

scan

Describes the scanning process of some output devices (i.e. whether it uses interlaced rendering or progressive rendering). Most modern screens use progressive rendering, whereas CRT and some other TV screens use interlaced rendering.

grid

Determines whether the output device is grid or bitmap.

update

Queries the ability of the output device to modify the apearance of content once it has been rendered. It accepts the following values:

none

Once it has been rendered, the layout can no longer be updated. For example, a document 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 percieved as a smooth animation.

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. Computer screens fit into this category.

overflow-block

Describes the behavior of the device when content overflows the initial containing block in the block axis.

none

There is no affordance for overflow in the block axis; any overflowing content is simply not displayed. For example, Billboards.

scroll

Overflowing content in the block axis is exposed by allowing users to scroll to it. For example, computer screens.

optional-paged

Overflowing content in the block axis is exposed by allowing users to scroll to it, but page breaks can be manually triggered (such as via the break-inside property) to cause the following content to display on the following page. For example, slideshows.

paged

Content is broken up into discrete pages; content that overflows one page in the block axis is displayed on the following page. For example, printers, "Print Preview" functions, e-book readers.

overflow-inline

Describes the behavior of the device when content overflows the initial containing block in the inline axis. If scroll is specified, overflowing content in the inline axis is exposed by allowing users to scroll to it. If set to 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 of color component. A value of @media (color) { … } is the same as @media (min-color: 1) { … } and matches all color devices. 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

escribes the number of bits per pixel in a monochrome frame buffer. If the device is not a monochrome device, the output device value will be 0.

Negative <integer>s are invalid.

color-gamut

Describes the approximate range of colors that are supported by the UA and output device.

pointer

Queries the presence and accuracy of a pointing device such as a mouse. If multiple pointing devices are present, this reflects the characteristics of the primary pointing device.

hover

Queries whether the primary pointing system allows the user to hover over elements on the page.

any-pointer

Same as pointer but applies to all pointing devices (not just the primary one).

any-hover

Same as hover but applies to all pointing devices (not just the primary one).

scripting

Queries whether scripting languages, such as JavaScript, are supported on the current document.

How to use Media Features

Here's an example of a media query that tests for a certain width of the output device:

You can also combine media features using logical operators, like this:

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