Opera Software ASA

CSS3 Media Queries support in Opera Presto 2.10

W3C reference

W3C CSS3 Media Queries

Opera article

Safe media queries

Opera Presto offers partial support for CSS3 Media Queries as described in the following data table. 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:

• Properties are used in declarations to give information about how to present a document. Media features are used in expressions to describe requirements of the output device.
• Most media features accept optional min- or max- prefixes to express greater or equal to and smaller or equal to constraints. 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.
• Properties always require a value to form a declaration. Media features, on the other hand, can also be used without a value. For a media feature feature, (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.
• Properties may accept more complex values, e.g., calculations that involve several other values. Media features only accept single values: one keyword, one number, or a number with a unit identifier. (The only exceptions are the aspect-ratio and device-aspect-ratio media features.)

For example, the color media feature can form expressions without a value ((color)), or with a value ((min-color: 1)). This specification defines media features usable with visual and tactile devices. Similarly, media features can be defined for aural media types.

Media queries

Please note that each property is hyperlinked to its place in the W3C CSS3 Media Queries module.

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	Yes
max-color	Yes
min-color	Yes
color-index	Yes
max-color-index	Yes
min-color-index	Yes
device-height	Yes
max-device-height	Yes
min-device-height	Yes
device-width	Yes
max-device-width	Yes
min-device-width	Yes
grid	Yes
height	Yes
max-height	Yes
min-height	Yes
monochrome	Yes
max-monochrome	Yes
min-monochrome	Yes
orientation	Yes
resolution	Yes
max-resolution	Yes
min-resolution	Yes
scan	Yes
width	Yes
max-width	Yes
min-width	Yes