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 theheight
media feature. - orientation
- Describes the orientation of the device. It is
portrait
when the value of theheight
media feature is greater than or equal to the value of thewidth
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 tonone
, 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
- Describes 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: