Media queries

W3C Working Draft 23 January 2002

This version:
http://www.w3.org/TR/2002/WD-css3-mediaqueries-20020123
Latest version:
http://www.w3.org/TR/css3-mediaqueries
Previous version:
http://www.w3.org/TR/2001/WD-css3-mediaqueries-20010517
Editors:
Tantek Çelik, Microsoft Corporation, tantekc@microsoft.com
Daniel Glazman, Netscape/AOL, glazman@netscape.com
Håkon Wium Lie, Opera Software, howcome@opera.com

Abstract

HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. "Screen" and "print" are two of media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets.

A media query consists of a media type and one or more expressions to limit the scope of style sheets. Among the media features that can be used in media queries are "width", "height", and "color". By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

Status of this document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. The latest status of this document series is maintained at the W3C.

This document is produced by the CSS Working Group (part of the Style activity) and is one of the modules of the upcoming CSS3 specification.

This is a W3C Last Call Working Draft for review by W3C members and other interested parties. The Last Call review period ends on 20 February 2002. Please send review comments before the review period ends to the public mailing list www-style@w3.org (archive).

It is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". This is work in progress and does not imply endorsement by, or the consensus of, either W3C or members of the DOM Working Group or members of the HTML Working Group.

A list of current W3C Recommendations and other technical documents including Working Drafts and Notes can be found at http://www.w3.org/TR.

Table of contents

1. Background

HTML4 [HTML40] and CSS2 [CSS2] currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. In HTML4, this can be written as:

<link rel="stylesheet" type="text/css" 
  media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" 
  media="print" href="serif.css">

Inside a CSS style sheet, one can declare that sections apply to certain media types:

@media screen {
  * { font-family: sans-serif }
}

The "print" and "screen" media types are defined in HTML. The complete list of media types in HTML is: "aural", "braille", "handheld", "print", "projection", "screen", "tty", "tv". CSS2 defines the same list with the addition of "embossed" to differentiate between braille tactile feedback devices and braille printers. Also, "all" is used to indicate that the style sheet applies to all media types.

Media-specific style sheets are supported by several User Agents. The most commonly used feature is, as in the example above, to distinguish between "screen" and "print".

There have been requests for ways to describe in more detail what type of output devices a style sheet applies to. Fortunately HTML4 foresaw these requests and defined a forward-compatible syntax for media types. Here is a quote from HTML4, section 6.13:

Future versions of HTML may introduce new values and may allow parameterized values. To facilitate the introduction of these extensions, conforming user agents must be able to parse the media attribute value as follows:

  1. The value is a comma-separated list of entries. For example,
    media="screen, 3d-glasses, print and resolution > 90dpi"
    

    is mapped to:

    "screen"
    "3d-glasses"
    "print and resolution > 90dpi"
    
  2. Each entry is truncated just before the first character that isn't a US ASCII letter [a-zA-Z] (Unicode decimal 65-90, 97-122), digit [0-9] (Unicode hex 30-39), or hyphen (45). In the example, this gives:
    "screen"
    "3d-glasses"
    "print"
    

The hypothetical example from the HTML4 specification is worth discussing in more detail:

<link rel="stylesheet" media="screen, 3d-glasses, 
  print and resolution > 90dpi" ... >

There are two logical operators in the example above. The comma denotes the logical OR, and the word "and" denotes the logical AND. The logical OR is already part of the HTML4 specification. The logical AND operator, however, is not defined.

Another operator used in the example above is "greater-than", denoted by ">". The square brackets and the ampersand character are reserved in HTML and XML and are therefore not suitable for use.

Finally, two different vocabularies are used: one for the media features ("resolution" is used above) and one for units (e.g. "dpi").

2. Requirements

In order for a solution to provide useful new functionality while remaining compatible current with User Agents supporting HTML4, the following requirements should be fulfilled:

  1. the syntax must fit into the media type syntax reserved in HTML4
  2. the solution must describe, in some detail, what kind of devices a style sheet can be applied to
  3. the syntax must be usable in future versions of CSS and XHTML
  4. the solution must offer more expressive power than the current solution without adding significant extra costs
  5. the solution must use a vocabulary in line with CSS and HTML
  6. the syntax must leave room for future extensions

3.1. CC/PP

Within W3C the work on CC/PP (Composite Capabilities/Preference Profiles) has addressed similar issues. The goal of the CC/PP framework is to specify how client devices express their capabilities and preferences to a server. Media queries go the other way; it's the document that declares what kind of media types a style sheet is suitable for. Still, the definition of media features could be shared between CC/PP and Media Queries..

In a Working Draft titled Composite Capability/Preference Profiles (CC/PP): Structure and Vocabularies, a non-mandatory Appendix (CC/PP attribute vocabulary for print and display) describe five generic media features:

Name Value Description
charWidth integer the display width of a the text display device
charHeight integer the display height of a text display device
pix-x integer the display width of an image display device
pix-y integer the display height of an image display device
color binary | grey | limited | mapped | full an indication of the color capabilities of the device

The last three media features are borrowed from RFC2534: Media Features for Display, Print, and Fax.

It is noteworthy that the first two media features use a different naming style (the so-called "CamelCase") than the last three.

3.2. RFC2534

Like CC/PP, RFC2534 also provides a framework for User Agents to declare their capabilities. In addition to "color", "pix-x" and "pix-y" (described above) RFC2534 defines several other generic media features:

Name Value Description
ua-media screen | screen-paged | stationery | transparency | envelope | envelope-plain | continuous Indicates device type
dpi rational numbers Resolution in dots per inch
paper-size letter | a4 | b4 | a3 | legal The size of the paged output device

For several reasons, these are not directly reusable:

3.3. RFC2506

The Internet Assigned Numbers Authority (IANA) has established a central registry for media feature vocabularies, and the procedure for registering new media features are described in RFC2506. It is suggested that the media features described below are registered according to RFC2506 to encourage other specifications to use it.

4. Media queries

A media query consists of a media type and one or more expressions involving media features. Here is a simple example written in HTML:

<link rel="stylesheet" media="screen and (color)" 
  href="http://style.com/color" />

The example above expresses that a certain style sheet (found from http://style.com/color) applies to devices of a certain media type ("screen") with certain characteristics (it must be a color screen).

The media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the User Agent is running (the User Agent is responsible for knowing which one of the defined media types which most closely resembles the device), and all expressions in the media query are true. In the example above there is one expression ("(color)").

Several media queries can be combined in a comma-separated list. If one or more of the media queries in the comma-separated list is true, the associated style sheet is applied, otherwise the associated style sheet is ignored. Consider this example written in CSS:

@media screen and (color),
  projection and (color) { ... }

The comma expresses a logical OR, while the "and" keyword expresses a logical AND. There is also a logical NOT in the syntax:

<link rel="stylesheet" media="not screen and (color)" 
  href="http://style.com/color" />

The presence of the keyword "not" at the beginning of the query will negate the result. I.e., if the media query had been true without the "not" keyword it will become false, and vice versa. User Agents that only support media types (as described in HTML4) will not recognize the "not" keyword and the associated style sheet is therefore not applied.

The keyword "only" can also be used to hide style sheets from older User Agents:

<link rel="stylesheet" media="only screen and (color)"
  href="http://style.com/color" />

User Agents supporting this specification will process media queries starting with "only" as if the "only" keyword was not present.

All media queries can be used in HTML, CSS and XML [XML-STYLE] without changing their syntax. Here is an example written in XML:

<?xml-stylesheet media="screen and (color), projection and (color)"
 rel="stylesheet" href="http://style.com/color" ?>

If a media feature does not apply to the device where the UA is running, expressions involving the media feature will be false. For example, the media feature "device-aspect-ratio" only applies to visual devices. On an aural device, expressions involving "device-aspect-ratio" will therefore always be false. Here is another example of a media query which is always false:

<link rel="stylesheet" media="aural and (min-device-width: 800px)" 
  href="http://style.com/color" />

Expressions will always be false if the unit of measurement does not apply to the device. For example, the px unit does not apply to tty devices so the following media query is always false:

<link rel="stylesheet" media="tty and (min-device-width: 800px)" 
  href="http://style.com/color" />

Note that the media queries in the two above examples would have been true if the keyword "not" had been added to the beginning of the media query.

5. Syntax

Here is a pseudo-BNF definition of media queries:

media_query: [only | not]? <media_type> [ and <expression> ]?
expression: ( <media_feature> [: <value>]* )
media_type: all | aural | braille | handheld | print | 
  projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width 
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | device-min-height | device-max-height
  | device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome 
  | resolution | min-resolution | max-resolution
  | scan

CSS style sheets are generally case-insensitive, and this is also the case for media queries.

The parenthesis ("()") around expressions are required. A User Agent conforming to this specification must not process expressions without the parenthesis. By following this requirement, there will be room for future extensions in the syntax.

Expressions involving unknown media features are always false. Consider this example:

<link rel="stylesheet" media="all and (max-weight: 3kg)
  and (color)" href="http://style.com/color" />

Since "weight" is an unknown media feature, the media query is negative and the associated style sheet will not be applied.

For a definition of values used in media queries, see CSS2, section 4.3: Values and Units.

6. Media features

Syntactically, media features resemble CSS properties: they have names and accept certain values. There are, however, several important differences between properties and media features:

This specification defines media features usable with visual and tactile devices. Similarly, media features can be defined for aural media types.

6.1. width

Values: <length>
Applies to: visual and tactile media types
Accepts min/max pretexts: yes

The "width" media feature describes the viewport width of the output device.

For example, this media query expresses that the style sheet is usable on printed output wider than 25cm:

<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://....">

This media query expresses that the style sheet is usable on devices with viewport (the part of the screen/paper where the document is rendered) widths between 400 and 700 pixels:

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

This media query expresses that style sheet is usable on screen and handheld devices if the width of the viewport is greater than 20em.

@media handheld and (min-width: 20em), 
  screen and (min-width: 20em) { ... }

The "em" value is based on the font size of the root element.

6.2. height

Values: <length>
Applies to: visual and tactile media types
Accepts min/max pretexts: yes

The "height" media feature describes the viewport height of the output device.

6.3. device-width

Values: <length>
Applies to: visual and tactile media types
Accepts min/max pretexts: yes

The "device-width" media feature describes the width of the output device.

6.4. device-height

Values: <length>
Applies to: visual and tactile media types
Accepts min/max pretexts: yes

The "device-height" media feature describes the height of the output device.

6.5. device-aspect-ratio

Values: <integer> / <integer>
Applies to: bitmapped media types
Accepts min/max pretexts: no

The "device-aspect-ratio" media feature describes the aspect ratio of the output device. The value consists of two positive integers separated by a "/".

In this specification, aspect ratio is defined as the number of horizontal pixels over the number of vertical pixels.

For example, if a screen device has 1280 horizontal pixels and 720 vertical pixels (commonly referred to as "16:9"), the following media queries will all match the device:

@media screen and (device-aspect-ratio: 16/9) { ... }
@media screen and (device-aspect-ratio: 32/18) { ... }
@media screen and (device-aspect-ratio: 1280/720) { ... }
@media screen and (device-aspect-ratio: 2560/1440) { ... }

Note that determining if a specified aspect ratio matches the device aspect ratio can be done through multiplication (e.g., 1280*9 = 11520 = 720*16) to avoid floating point operations.

6.6. color

Values: <integer>
Applies to: visual media types
Accept min/max pretexts: yes

The "color" media feature describes the number of bits per color component of the output device. If the device is not a color device, the value will be 0. For example, these two media queries express that a style sheet applies to all color devices:

@media all and (color) { ... }
@media all and (min-color: 1) { ... }

This media query expresses that a style sheet applies to color devices with 2 or more bits per color component:

@media all and (min-color: 2) { ... }

For instance, if an 8-bit color system represents the red component with 3 bits, the green component with 3 bits and the blue component with 2 bits, the "color" media feature will have a value of 2.

In a device with indexed colors, the "color" media feature will hold the minimum number of bits per color component in the lookup table.

The described functionality is only able to describe color capabilities at a superficial level. If further functionality is required, RFC2531 (Content Feature Schema for Internet Fax) provide more specific media features which may be supported at a later stage.

6.7. color-index

Values: <integer>
Applies to: visual media types
Accepts min/max pretexts: yes

The "color-index" media feature describes the number of entries in the color lookup table of the output device. For example, here are two ways to express that a style sheet applies to all color index devices:

@media all and (color-index) { ... }
@media all and (min-color-index: 1) { ... }

This media query expresses that a style sheet applies to a color index device with 256 or more entries:

@media all and (min-color-index: 256) { ... }

6.8. monochrome

Values: <integer>
Applies to: visual media types
Accepts pretexts: yes

The "monochrome" media feature 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. For example, here are two ways to express that a style sheet applies to all monochrome devices:

@media all and (monochrome) { ... }
@media all and (min-monochrome: 1) { ... }

For example, express that a style sheet applies to monochrome devices with more than 2 bits per pixels:

@media all and (min-monochrome: 2) { ... }

Express that there is one style sheet for color pages and another for monochrome:

<link rel="stylesheet" media="print and (color)" 
  href="http://...">
<link rel="stylesheet" media="print and (monochrome)" 
  href="http://...">

6.9. resolution

Values: <resolution>
Applies to: bitmapped media types
Accepts min/max pretexts: yes

The "resolution" media feature describes the resolution of the output device.

For example, this media query expresses that a style sheet is usable on devices with resolution greater than 300 dots per inch:

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

6.10. scan

Values: progressive | interlace
Applies to: tv media types
Accepts min/max pretexts: no

The "scan" media feature describes the scanning process of tv output devices.

For example, this media query expresses that a style sheet is usable on tv devices with progressive scanning:

@media tv and (scan: progressive) { ... }

7. Units

The pixel unit used in media queries are of the "logical" kind (which is reported to the User Agent) rather than the "physical" kind (which often remains unknown to software). In any case, the User Agent must use the same definition of a pixel in media queries as is used to interpret style sheets.

Relative units in media queries are based on the values of the document's root element.

The "dpi" unit describes the resolution of an output device in "dots per inch". This unit is only used in the "resolution" media feature.

8. Acknowledgments

This specification is the product of the W3C Working Group on Cascading Style Sheets and Formatting Properties. In addition to the editors of this specification, the members of the Working Group are:

A number of invited experts to the Working Group have significantly contributed to CSS3: L. David Baron, Tim Boland (NIST), Todd Fahrner, Daniel Glazman, Ian Hickson, Eric Meyer (The OPAL Group), Jeff Veen.

9. Appendix A. References

[CSS2]
Bert Bos; Håkon Wium Lie; Chris Lilley; Ian Jacobs. Cascading Style Sheets, level 2. 1998. W3C Recommendation. URL: http://www.w3.org/TR/REC-CSS2
[HTML40]
Raggett, D.; Le Hors, A.; Jacobs, I.. HTML 4.0 Specification (revised). Apr 1998. W3C Recommendation. URL: http://www.w3.org/TR/1998/REC-html40-19980424
[XML-STYLE]
J. Clark. Associating Style Sheets with XML documents. 29 June 1999. W3C Recommendation. URL: http://www.w3.org/TR/xml-stylesheet