Media queries

W3C Working Draft, 4 Apr 2001

This version:
http://www.w3.org/TR/2001/WD-css3-mediaqueries-20010404
Latest version:
http://www.w3.org/TR/css3-mediaqueries
Previous version:
(none)
Authors:
Håkon Wium Lie, Opera Software, howcome@opera.com
Tantek Çelik, Microsoft Corporation, tantekc@microsoft.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 the media types that have been defined. To describe in more detail what type of devices a style sheet applies to, this document proposes media queries.

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

Finally, it is proposed that the media features described in this document should be registered in IANA's central registry for media feature vocabularies.

Status of this document

This section describes the status of this document at the time of its publication. The latest status of this document series is maintained at the W3C; see the list of technical reports or follow the "latest version" link above.

This is a public W3C Working Draft for review by W3C members and other interested parties. 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 document is produced by the CSS working group (part of the style activity). The working group welcomes feedback and discussion, preferably on the public mailing list www-style@w3.org (see instructions & archive), although comments may also be sent to the authors.

This is the first version of the draft.

Contents

1. Introduction

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. In HTML4, this can be written as:

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

Inside a CSS style sheet, this can be written:

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

"print" and "screen" are two of eight media types defined in HTML4. Here is the complete list: 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 common 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 devices a style sheet applies to. The current media type names are fuzzy it is not, e.g., clear when a device ceases to be a "screen" and becomes a "handheld" instead.

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"
    

2. Requirements

In order for a solution to provide useful new functionality while remaining backwards-compatible with HTML4, the following requirements should be fulfilled:

3. The hypothetical example in HTML4

Before proposing a new syntax, it is useful to discuss the hypothetical example from the HTML4 specification:

<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 a 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 ">". In order to have enough expressive power, these operators should also be part of a solution: ">", ">=", "<", "<=", and "=". The square brackets, as well as the ampersand character is 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") need names.

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. In this proposal the communication goes the other way; it's the the document that declares what kind of media types a style sheet is suitable for. Still, the media features should be usable in both scenarios.

In a Working Draft titled CC/PP Attribute Vocabularies a Client vocabulary for print and display is defined. Among the "attribute names" listed, there are 5 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 RFC 2534: Media Features for Display, Print, and Fax.

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

RFC 2534 defines 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:

4.1. RFC 2506

The media features of RFC 2534 are registered according to a procedure described in RFC 2506. The Internet Assigned Numbers Authority (IANA) has established a central registry for media feature vocabularies, and it is suggested that the media featured described below are registered according to RFC 2506.

5. Media queries

This note proposes to add media queries to CSS and HTML. 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 above example 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).

Here is a slightly more complex example written in CSS:

@media print and (min-height: 11in) { 
  IMG { display: none }
}

The above example expresses that on printed sheets smaller than 11 inches high, IMG elements should not be printed.

In both examples above, the media queries have been bold-faced. Note that exactly the same syntax can be used both in CSS and HTML.

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
  | monochrome | min-monochrome | max-monochrome 
  | color | min-color | max-color
  | resolution | min-resolution | max-resolution

For a definition of value, see CSS2. The various media features are explained below.

The keywords "only" and "not" are allowed in the media query as a way to avoid that legacy User Agents apply the style sheet without the device fulfilling the other conditions of the media query. This will work since "only" and "not" are not media types in HTML4.

6. Examples

Below are some common cases expressed in the proposed syntax:

  1. Express that a style sheet is usable on all color devices:
    <link rel="stylesheet" media="all and (color)" href="http://....">
    @media all and (color) { ... }
    
    
  2. Express that a style sheet is usable on paper wider than 25cm:
    <link rel="stylesheet" media="print and (min-width: 25cm)" href="http://....">
    @media print and (min-width: 25cm) { ... }" 
    
  3. 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://...">
    
  4. Express 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) { ... } 
    
  5. Express that the style sheet is usable on tty devices with with viewports 80 characters or wider:
    <link rel="stylesheet" media="tty and (min-width: 80ch)" href="...">
    

    Note that the "ch" unit is not part of CSS1/CSS2.

  6. Express 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.

  7. Express that a style sheet is usable on devices with resolution greater than 300dpi:
    @media print and (min-resolution: 300dpi)  { ... }
    

7. Media features

This note proposes seven media features usable with visual and tactile devices. Similarly, media features can be defined for aural media types.

All media features take a "min-" or "max-" pretext to express constraints. Without any pretext, the expression returns true if the value is different from zero. In practice, all media features except "color" and "monochrome" will only be used with pretexts.

7.1. width

Values: <length>
Units: all CSS2 length units + "ch"
Applies to: visual and tactile media types

7.2. height

Values: <length>
Units: all CSS2 length units + "ch"
Applies to: visual and tactile media types

7.3. viewport-aspect-ratio

Values: 16:9 | 4:3
Units:
Applies to: tv

7.4. color

Values:
Units: see below
Applies to: visual media types

The "color" media feature holds the minimum number of bits per color component in the frame buffer. If the device is not a color device, 0 is returned. For example, this is how to express that a style sheet applies to all color devices:

@media all and (color) { ... }

This is how to express 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 system with indexed colors, the "color" media feature will have a value of 1.

The described functionality is only able to describe color capabilities on a superficial level. If further functionality is required, RFC 2531 (Content Feature Schema for Internet Fax) provide more specific media queries, e.g.: CIELAB-L-depth CIELAB-a-depth CIELAB-b-depth CIELAB-L-min CIELAB-L-max CIELAB-a-min CIELAB-a-max CIELAB-b-min CIELAB-b-max.

7.5. monochrome

Values:
Units: see below
Applies to: visual media types

The "monochrome" media feature holds the number of bits per pixel in a monochrome frame buffer. If the device is not a monochrome device, 0 is returned. For example, this is how to express that a style sheet applies to all monochrome devices:

@media all and monochrome { ... }

This is how to express that a style sheet applies to monochrome devices with more than 2 bits per pixels:

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

7.6. resolution

Values:
Units: dpi, li
Applies to: dpi applies to bit mapped media types, li applies to tv media types

The "li" unit describes the number of visible horizontal lines in a TV. It may be possible to express the same functionality using the height property (e.g. "height: 575px"). This is still an open issue.

7.7. scan

Values: progressive | interlace
Units:
Applies to: tv

8. New units

The units described below are valid in certain media queries, and may or may not become available in other CSS contexts.