As stated by the W3C, syntactically, media features resemble CSS properties: they have names and accept certain values. There are, however, several important differences between properties and media features:
min- or max- prefixes to express greater or equal toand
smaller or equal toconstraints. This syntax is used to avoid
<and
>characters which may conflict with HTML and XML. Those media features that accept prefixes will most often be used with prefixes, but can also be used alone.
feature) will evaluate to true if (feature:x)
will evaluate to true for a value x other than zero or zero followed by a unit identifier (i.e., other than 0,
0px, 0em, etc.). Media features that are prefixed by min/max cannot be used without a value. When a media feature
prefixed with min/max is used without a value it makes the media query malformed.aspect-ratio
and device-aspect-ratio media features.)
For example, the
media feature can form expressions without a value (color(
),
or with a value (color)(
). This specification defines media features usable with visual and tactile
devices. Similarly, media features can be defined for aural media types.
min-color: 1)
| Media Query | Support |
|---|---|
aspect-ratio |
Yes |
| max-aspect-ratio | Yes |
| min-aspect-ratio | Yes |
device-aspect-ratio |
Yes |
| max-device-aspect-ratio | Yes |
| min-device-aspect-ratio | Yes |
color |
No |
| max-color | No |
| min-color | No |
color-index |
No |
| max-color-index | No |
| min-color-index | No |
device-height |
Yes |
| max-device-height | Yes |
| min-device-height | Yes |
device-width |
Yes |
| max-device-width | Yes |
| min-device-width | Yes |
grid |
No |
height |
Yes |
| max-height | Yes |
| min-height | Yes |
monochrome |
No |
| max-monochrome | No |
| min-monochrome | No |
orientation |
No |
resolution |
No |
| max-resolution | No |
| min-resolution | No |
scan |
No |
width |
Yes |
| max-width | Yes |
| min-width | Yes |
Need help? Hit F1 anytime while using Opera to access our online help files, or go here.