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

Contents

• 1. Introduction
• 2. Requirements
• 3. The hypothetical example in HTML4
• 4. Related work
  • 4.1. RFC 2506
• 5. Media queries
• 6. Examples
• 7. Media features
  • 7.1. width
  • 7.2. height
  • 7.3. viewport-aspect-ratio
  • 7.4. color
  • 7.5. color-index
  • 7.6. monochrome
  • 7.7. resolution
  • 7.8. scan
• 8. New units

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 somewhat fuzzy. For example, it is 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:

• the solution must describe, in some detail, what kind of devices a style sheet can be applied to
• the syntax must fit into the namespace reserved in HTML4
• the syntax must be usable in future versions of CSS and XHTML
• the solution must offer significantly more expressive power than the current solution without adding significant extra costs
• the solution must use a vocabulary in line with CSS and HTML

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 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") need names.

4. Related work

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 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:

The last three media features are borrowed from RFC 2534: 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.

RFC 2534 defines other generic media features:

For several reasons, these are not directly reusable:

• The first media feature, "ua-media", is at the same level of abstraction as the list of media types in HTML4 and CSS2 but its coverage seems narrower. For now it will be disregarded.
• The media features described in RFC 2534 has three types of values: integers, rational numbers, and keywords. CSS also uses keywords, but favors the combination of number and unit (e.g. "12px") for values involving numbers.
• The CSS&FP 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.

4.1. RFC 2506

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 RFC 2506. It is suggested that the media features 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
  | color-index | min-color-index | max-color-index
  | 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 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

7.2. height

7.3. viewport-aspect-ratio

7.4. color

The "color" media feature holds the minimum number of bits per color component. 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 device with indexed colors, the "color" media feature will return the minimum number of bits per color component in the lookup table.

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. color-index

The "color-index" media feature holds the number of entries in the color lookup table. If the device is not an indexed color device, 0 is returned. For example, this is how to express that a style sheet applies to all color index devices:

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

This is how to express that a style sheet applies to a color index device with 256 or more entries:

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

7.6. monochrome

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.7. resolution

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.8. scan

8. New units

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

• ch
• dpi
• li