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:

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

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

@media (min-width: 2560px and min-height: 1600px) {

  ...styles here...
  
  }
}

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

@media print and (min-resolution: 300dpi) {

  ...styles here...
  
  }
}