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 out of the different media types that have been defined. To describe in more detail what types 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 involving media features. Among the proposed media features are "width", "height", and "color". By using media queries, content presentations can be tailored to a range of devices without changing the content itself.

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

"Screen" and "print" 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 list of media types are intentionally fuzzy and 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"
   

Requirements

The solution proposed later in this document fulfills the following requirements:

• 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
• the solution must use a vocabulary in line with CSS and HTML

The hypothetical example in HTML4

Before proposing a new syntax, it is useful to discuss the hypotethical 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 "=".

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

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

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

Observation: It is noteworthy that the two first media features uses a diffent 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 is a large number of standards worldwide.

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 & 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 & (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: <media_type> [ & <expression> ]+
expression: <media_feature> [ <operator> <value> ]? | ( <media_feature> [<operator> <value>]? )
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
operator: = | > | < | >= | <=
media_feature: width | height | viewport-width | viewport-height | monochrome | color | resolution

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

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 & color" href="http://....">
   @media all & color { ... }
   
   

2. Express that a style sheet is usable on paper wider than 25cm:

   <link rel="stylesheet" media="print & (width > 25cm)" href="http://....">
   @media print & (width > 25cm) { ... }" 
   

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

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

4. Express that the style sheet is usable on devices with screen widths between 400 and 700 pixels:

   @media screen & (width > 400px) & (width > 700px) { ... } 
   

5. Express that the style sheet is usable if the viewport (the part of the screen/paper where the document is rendered) is between 400 and 700 pixels wide:

   <link rel="stylesheet" media="all & (viewport-width > 400px) & (viewport-width > 700px)" href="...">
   

6. Express that the style sheet is usable on tty devices with with viewports 80 characters or wider:

   <link rel="stylesheet" media="tty & (viewport-width > 80ch)" href="...">
   

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

7. Express that style sheet is usable on sceen and handheld devices if the width of the viewport is greater than 20em.

   @media handheld & (viewport-width > 20em), screen & (viewport-width > 20em) { ... }
   

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

8. Express that a style sheet is usable on devices with resolution greater than 300dpi:

   @media print & (resolution > 300dpi)  { ... }
   

Media features

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

width

The "width" media feature holds the

height

viewport-width

viewport-height

color

The "color" media feature holds the number of bits per pixel 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 & color { ... }

This is how to express that a style sheet applies to color devices with 16 or more bits per pixels:

@media all & (color >= 16) { ... }

monochrome

The "monochrome" media feature holds the number of bits per pixel in the 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 & monochrome { ... }

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

@media all & (monochrome > 2) { ... }

resolution