Media queries

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

Table of contents

• 1. Background
• 2. Requirements
• 3. Related work
  • 3.1. CC/PP
  • 3.2. RFC2534
  • 3.3. RFC2506
• 4. Media queries
• 5. Syntax
• 6. Media features
  • 6.1. width
  • 6.2. height
  • 6.3. device-width
  • 6.4. device-height
  • 6.5. device-aspect-ratio
  • 6.6. color
  • 6.7. color-index
  • 6.8. monochrome
  • 6.9. resolution
  • 6.10. scan
• 7. Units
• 8. Acknowledgments
• 9. Appendix A. References

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. Related work

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:

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:

For several reasons, these are not directly reusable:

• The "ua-media" feature seems to be at the same level of abstraction as the list of media types in HTML4/CSS2. One value ("screen") is found in both categories, and RFC2534's "screen-paged" seems to be the same as "projection" in HTML4/CSS2. The rest of the values in RFC2534 ("stationery", "transparency", "envelope", "envelope-plain", "continuous") describe printed output and may be candidates for new media types in HTML4/CSS2 if the list is extended in the future.
• The media features described in RFC2534 has three types of values: integers, rational numbers, and keywords. The CSS syntax also uses keywords, but favors the combination of number and unit (e.g. "12px") for values involving numbers.
• The CSS WG has considered using names for page sizes in the past but decided against doing so since there are a large number of standards worldwide.

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:

• 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-" pretexts to express "greater or equal to" and "smaller or equal to" constraints. This syntax is used to avoid "<" and ">" characters which conflict with HTML and XML. Those media features that accept pretexts will most often be used with pretexts, 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 in which case the expression will be true if the media feature's value in the output device is different from zero. 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.

6.1. width

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

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

6.3. device-width

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

6.4. device-height

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

6.5. device-aspect-ratio

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

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

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

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

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

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:

• Marc Attinasi (Netscape/AOL)
• Bert Bos (W3C)
• Tantek Çelik (Microsoft Corp.)
• Don Day (IBM)
• Martin Dürst (W3C)
• Angel Diaz (IBM)
• Daniel Glazman (Netscape/AOL from November 2000, and Electricité de France until February 2000)
• Håkon W. Lie (Opera Software from April 1999, and W3C until April 1999)
• Chris Lilley (W3C)
• Dave Raggett (W3C/Openwave Systems Inc.)
• Pierre Saslawsky (Netscape/AOL)
• Robert Stevahn (Hewlett-Packard)
• Michel Suignard (Microsoft Corp.)
• Ted Wugofski (Openwave Systems Inc.)
• Steve Zilles (Adobe)

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