Device independence through "Media queries"


Bert Bos

W3C Workshop on Delivery Context
Sophia-Antipolis, 4-5 March 2002

Bert Bos <>
Sophia Antipolis, Frankrijk

Media Queries overview

Device limitations have always been part of CSS, because of its "forward-compatible" parsing rules, that allow an author to include fallbacks for unsupoorted features. But these fallbacks are limited to alternative values for the same property; it is not possible to use, e.g., a font change as a n alternative to a color change.

CSS2 and HTML4 addressed part of that problem by introducing "media," such as 'print' and 'projection'. But within each of these media, the devices can still vary widely, especially on handheld and TV media. Therefore the media queries allow for further parametrization of the media with certain important characteristics, such as screen size and number of colors.

Media characteristics

@media screen
    and (min-width: 400px)
    and (max-width: 700px) { ... }

<link media="screen
    and (min-width: 400px)
    and (max-width: 700px)" ...>

Same syntax also used in xml-stylesheet PI.

Most of the characteristics have obvious application: cannot use colors on monochrome device, should not draw 1-pixel horizontal lines on interlaced devices, etc.

Granularity is chosen by designer

When used inside CSS:

Syntax of CSS allows putting '@media' rules inside a style sheet or use '@import' or HTML <link> to select whole style sheets. In the latter case, the imported style sheets don't have to contain the media they are designed for.

CC/PP equivalent definition (RDF)


<ccpp:Attribute rdf:ID="monochrome">
 <rdfs:label>Screen depth of monochrome devices,
  or "0" if not monochrome</rdfs:label>
 <rdfs:domain rdf:resource="...#Component" />
 <rdfs:range rdf:resource="...#Integer" />
  The "monochrome" media feature describes the...

The media features are very simple in structure and have straightforward ASCII identifiers. We could add them to the IANA registry and/or express them as CC/PP attributes without problem. This might be useful if somebody wants to apply them in a different context.

Advantages & disadvantages

Re device independence and best user experience:

The vocabulary is controled by W3C, and therefore is likely to be very stable. There will be a long enough warning period before any new features are introduced to allow implementers and users to discuss them and adapt their software to it. On the other hand, if a need for a new feature is identified, it will take a while before it becomes a W3C Recommendation.

The syntax for media features favors short descriptions, which is good for authors and promotes "liquid" designs over individual style sheets for slightly differrent media. But it makes the syntax less useful for applications that require very detailed device descriptions. CC/PP syntax might be the alternative for those cases.


Comments from the audience after the presentation: