You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1228 lines
49 KiB
1228 lines
49 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
|
|
<html lang=en-US>
|
|
<head>
|
|
<title>Media Queries</title>
|
|
|
|
<style type="text/css">
|
|
blockquote {
|
|
background: #eef;
|
|
padding: 0.5em;
|
|
margin: 1em 0;
|
|
border: thin solid black; }
|
|
pre { font-family: courier, monospace; font-weight: bold; white-space: pre-wrap }
|
|
.example pre em { font-style: normal }
|
|
span.label { font-style: italic }
|
|
</style>
|
|
<link href=default.css rel=stylesheet>
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-CR" rel=stylesheet>
|
|
|
|
<body>
|
|
<div class=head> <!--begin-logo-->
|
|
<p><a href="http://www.w3.org/"><img alt=W3C height=48
|
|
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
|
|
|
|
<h1 id=media-queries>Media Queries</h1>
|
|
|
|
<h2 class="no-num no-toc" id=w3c-working>W3C Candidate Recommendation 27
|
|
July 2010</h2>
|
|
|
|
<dl>
|
|
<dt>This Version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/">http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/</a>
|
|
|
|
<dt>Latest Version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/css3-mediaqueries/">http://www.w3.org/TR/css3-mediaqueries/</a>
|
|
|
|
<dt>Previous Version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2009/CR-css3-mediaqueries-20090915/">http://www.w3.org/TR/2009/CR-css3-mediaqueries-20090915/</a>
|
|
|
|
<dt>Editors:
|
|
|
|
<dd class=vcard><a class="url fn n"
|
|
href="http://people.opera.com/howcome/" lang=no> <span
|
|
class=given-name>Håkon</span> <span
|
|
class=additional-name>Wium</span> <span class=family-name>Lie</span></a>
|
|
<<span class=email>howcome @opera.com</span>>
|
|
|
|
<dd class=vcard><a class="url fn" href="http://tantek.com/"
|
|
lang=tr>Tantek Çelik</a> <<span
|
|
class=email>tantek @cs.stanford.edu</span>>
|
|
|
|
<dd class=vcard><span class=given-name>Daniel</span> <span
|
|
class=family-name>Glazman</span> <<span
|
|
class=email>daniel.glazman @disruptive-innovations.com</span>>
|
|
|
|
<dd class=vcard><a class="url fn n" href="http://annevankesteren.nl/"
|
|
hreflang=en lang=nl>Anne van Kesteren</a> <<span
|
|
class=email>annevk@opera.com</span>>
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class=copyright><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
|
|
rel=license>Copyright</a> © 2010 <a
|
|
href="http://www.w3.org/"><acronym title="World Wide Web
|
|
Consortium">W3C</acronym></a><sup>®</sup> (<a
|
|
href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
|
|
of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
|
|
title="European Research Consortium for Informatics and
|
|
Mathematics">ERCIM</acronym></a>, <a
|
|
href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
|
|
and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> rules apply.</p>
|
|
<!--end-copyright-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
|
|
|
|
<p>HTML4 and CSS2 currently support media-dependent style sheets tailored
|
|
for different <em>media types</em>. For example, a document may use
|
|
sans-serif fonts when displayed on a screen and serif fonts when printed.
|
|
‘<code class=css>screen</code>’ and ‘<code
|
|
class=css>print</code>’ are two media types that have been defined.
|
|
<em>Media queries</em> extend the functionality of media types by allowing
|
|
more precise labeling of style sheets.
|
|
|
|
<p>A media query consists of a media type and zero or more expressions that
|
|
check for the conditions of particular <em>media features</em>. Among the
|
|
media features that can be used in media queries are ‘<code
|
|
class=css>width</code>’, ‘<code
|
|
class=css>height</code>’, and ‘<code
|
|
class=css>color</code>’. By using media queries, presentations can
|
|
be tailored to a specific range of output devices without changing the
|
|
content itself.
|
|
|
|
<h2 class="no-num no-toc" id=status>Status of this document</h2>
|
|
<!--begin-status-->
|
|
|
|
<p><em>This section describes the status of this document at the time of
|
|
its publication. Other documents may supersede this document. A list of
|
|
current W3C publications and the latest revision of this technical report
|
|
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
|
|
index at http://www.w3.org/TR/.</a></em>
|
|
|
|
<p>This document was produced by the <a
|
|
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> as a <a
|
|
href="http://www.w3.org/Consortium/Process/tr#RecsCR">Candidate
|
|
Recommendation.</a>
|
|
|
|
<p>A Candidate Recommendation is a document that has been widely reviewed
|
|
and is ready for implementation. W3C encourages everybody to implement
|
|
this specification and return comments to the (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
|
|
mailing list <a
|
|
href="mailto:www-style@w3.org?Subject=%5Bcss3-mediaqueries%5D%20PUT%20SUBJECT%20HERE">
|
|
www-style@w3.org</a> (see <a
|
|
href="http://www.w3.org/Mail/Request">instructions</a>). When sending
|
|
e-mail, please put the text “css3-mediaqueries” in the
|
|
subject, preferably like this: “[<!---->css3-mediaqueries<!---->]
|
|
<em>…summary of comment…</em>”
|
|
|
|
The editors maintain a <a
|
|
href="http://dev.w3.org/csswg/css3-mediaqueries/" >draft with
|
|
proposed changes</a>.
|
|
|
|
<p>Publication as a Candidate Recommendation does not imply endorsement by
|
|
the W3C Membership. This is a draft document and may be updated, replaced
|
|
or obsoleted by other documents at any time. It is inappropriate to cite
|
|
this document as other than work in progress.
|
|
|
|
<p>This document was produced by a group operating under the <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
|
|
2004 W3C Patent Policy</a>. W3C maintains a <a
|
|
href="http://www.w3.org/2004/01/pp-impl/32061/status"
|
|
rel=disclosure>public list of any patent disclosures</a> made in
|
|
connection with the deliverables of the group; that page also includes
|
|
instructions for disclosing a patent. An individual who has actual
|
|
knowledge of a patent which the individual believes contains <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">
|
|
Essential Claim(s)</a> must disclose the information in accordance with <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">
|
|
section 6 of the W3C Patent Policy</a>.</p>
|
|
<!--end-status-->
|
|
<!--
|
|
<p>This specification is a <strong>Last Call Working Draft</strong>. All
|
|
persons are encouraged to review this document and <strong>send comments
|
|
to the <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a>
|
|
mailing list</strong> as described above. The
|
|
<strong>deadline for comments</strong> is <strong>21 November 2008</strong>.</p>
|
|
-->
|
|
|
|
<p>For this specification to exit the CR stage, the following conditions
|
|
shall be met:
|
|
|
|
<ol>
|
|
<li>
|
|
<p>There must be at least two interoperable implementations. For the
|
|
purposes of this criterion, we define the following terms:</p>
|
|
|
|
<dl>
|
|
<dt>interoperable
|
|
|
|
<dd>
|
|
<p>passing the respective test case(s) in the <a
|
|
href="http://www.w3.org/Style/CSS/Test/">CSS test suite</a>, or, if
|
|
the implementation is not a Web browser, an equivalent test. Every
|
|
relevant test in the test suite should have an equivalent test created
|
|
if such a user agent (UA) is to be used to claim interoperability. In
|
|
addition if such a UA is to be used to claim interoperability, then
|
|
there must one or more additional UAs which can also pass those
|
|
equivalent tests in the same way for the purpose of interoperability.
|
|
The equivalent tests must be made publicly available for the purposes
|
|
of peer review.
|
|
|
|
<dt>implementation
|
|
|
|
<dd>
|
|
<p>a user agent which:</p>
|
|
|
|
<ol>
|
|
<li>implements the specification.
|
|
|
|
<li>is available (i.e. publicly downloadable or available through some
|
|
other public point of sale mechanism). This is the "show me"
|
|
requirement.
|
|
|
|
<li>is shipped, or is a "nightly build" (i.e., a development version
|
|
for the next release), but is not experimental (i.e., a version
|
|
specifically designed to pass the test suite and not intended for
|
|
daily usage going forward).
|
|
</ol>
|
|
</dl>
|
|
|
|
<li>
|
|
<p>There must be a <a
|
|
href="http://www.w3.org/Style/CSS/Test/MediaQueries/">Test Suite</a>.
|
|
|
|
<li>
|
|
<p>A minimum of another four weeks of the CR period must elapse. That is,
|
|
this specification will not exit CR before 24 August 2010. When the
|
|
specification exits CR, an implementation report will be published. At
|
|
this point, no such report exists.
|
|
</ol>
|
|
|
|
<p>The <a
|
|
href="http://www.w3.org/Style/css3-updates/css3-mediaqueries-comments">comments
|
|
received on the last working draft</a> are still available.
|
|
|
|
|
|
|
|
|
|
<h2 class="no-num no-toc" id=contents>Table of contents</h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class=toc>
|
|
<li><a href="#background"><span class=secno>1. </span>Background</a>
|
|
|
|
<li><a href="#media0"><span class=secno>2. </span>Media Queries</a>
|
|
|
|
<li><a href="#syntax"><span class=secno>3. </span>Syntax</a>
|
|
<ul class=toc>
|
|
<li><a href="#error-handling"><span class=secno>3.1. </span>Error
|
|
Handling</a>
|
|
</ul>
|
|
|
|
<li><a href="#media1"><span class=secno>4. </span>Media features</a>
|
|
<ul class=toc>
|
|
<li><a href="#width"><span class=secno>4.1. </span>width</a>
|
|
|
|
<li><a href="#height"><span class=secno>4.2. </span>height</a>
|
|
|
|
<li><a href="#device-width"><span class=secno>4.3.
|
|
</span>device-width</a>
|
|
|
|
<li><a href="#device-height"><span class=secno>4.4.
|
|
</span>device-height</a>
|
|
|
|
<li><a href="#orientation"><span class=secno>4.5. </span>orientation</a>
|
|
|
|
|
|
<li><a href="#aspect-ratio"><span class=secno>4.6.
|
|
</span>aspect-ratio</a>
|
|
|
|
<li><a href="#device-aspect-ratio"><span class=secno>4.7.
|
|
</span>device-aspect-ratio</a>
|
|
|
|
<li><a href="#color"><span class=secno>4.8. </span>color</a>
|
|
|
|
<li><a href="#color-index"><span class=secno>4.9. </span>color-index</a>
|
|
|
|
|
|
<li><a href="#monochrome"><span class=secno>4.10. </span>monochrome</a>
|
|
|
|
<li><a href="#resolution"><span class=secno>4.11. </span>resolution</a>
|
|
|
|
<li><a href="#scan"><span class=secno>4.12. </span>scan</a>
|
|
|
|
<li><a href="#grid"><span class=secno>4.13. </span>grid</a>
|
|
</ul>
|
|
|
|
<li><a href="#values"><span class=secno>5. </span>Values</a>
|
|
|
|
<li><a href="#units"><span class=secno>6. </span>Units</a>
|
|
<ul class=toc>
|
|
<li><a href="#resolution0"><span class=secno>6.1. </span>Resolution</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
|
|
|
|
<li class=no-num><a href="#references">References</a>
|
|
<ul class=toc>
|
|
<li class=no-num><a href="#normative-references">Normative
|
|
references</a>
|
|
|
|
<li class=no-num><a href="#other-references">Other references</a>
|
|
</ul>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<h2 id=background><span class=secno>1. </span>Background</h2>
|
|
|
|
<p>(This section is not normative.)
|
|
|
|
<p>HTML4 <a href="#HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>
|
|
and CSS2 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
currently support media-dependent style sheets tailored for different
|
|
media types. For example, a document may use different style sheets for
|
|
screen and print. In HTML4, this can be written as:
|
|
|
|
<div class=example>
|
|
<pre><code><link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
|
|
<link rel="stylesheet" type="text/css" media="print" href="serif.css"></code></pre>
|
|
</div>
|
|
|
|
<p>Inside a CSS style sheet, one can declare that sections apply to certain
|
|
media types:
|
|
|
|
<div class=example>
|
|
<pre><code>@media screen {
|
|
* { font-family: sans-serif }
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<p>The ‘<code class=css>print</code>’ and ‘<code
|
|
class=css>screen</code>’ media types are defined in HTML4. The
|
|
complete list of media types in HTML4 is: ‘<code
|
|
class=css>aural</code>’, ‘<code
|
|
class=css>braille</code>’, ‘<code
|
|
class=css>handheld</code>’, ‘<code
|
|
class=css>print</code>’, ‘<code
|
|
class=css>projection</code>’, ‘<code
|
|
class=css>screen</code>’, ‘<code class=css>tty</code>’,
|
|
‘<code class=css>tv</code>’. CSS2 defines the same list,
|
|
deprecates ‘<code class=css>aural</code>’ and adds
|
|
‘<code class=css>embossed</code>’ and ‘<code
|
|
class=css>speech</code>’. Also, ‘<code
|
|
class=css>all</code>’ is used to indicate that the style sheet
|
|
applies to all media types.
|
|
|
|
<p>Media-specific style sheets are supported by several user agents. The
|
|
most commonly used feature is to distinguish between ‘<code
|
|
class=css>screen</code>’ and ‘<code
|
|
class=css>print</code>’.
|
|
|
|
<p>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 <a
|
|
href="http://www.w3.org/TR/1999/REC-html401-19991224/types.html#h-6.13">HTML4,
|
|
section 6.13</a>:
|
|
|
|
<blockquote
|
|
cite="http://www.w3.org/TR/1999/REC-html401-19991224/types.html#h-6.13">
|
|
<p>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 <a
|
|
href="http://www.w3.org/TR/1999/REC-html401-19991224/present/styles.html#adef-media"><samp>media</samp></a>
|
|
attribute value as follows:
|
|
|
|
<ol>
|
|
<li>The value is a comma-separated list of entries. For example,
|
|
<pre><code>media="screen, 3d-glasses, print and resolution > 90dpi"</code></pre>
|
|
|
|
<p>is mapped to:</p>
|
|
|
|
<pre><code>"screen"
|
|
"3d-glasses"
|
|
"print and resolution > 90dpi"</code></pre>
|
|
|
|
<li>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:
|
|
<pre><code>"screen"
|
|
"3d-glasses"
|
|
"print"</code></pre>
|
|
</ol>
|
|
</blockquote>
|
|
|
|
<p>Media queries, as described in this specification, build on the
|
|
mechanism outlined in HTML4. The syntax of media queries fit into the
|
|
media type syntax reserved in HTML4. The <code class=html>media</code>
|
|
attribute of HTML4 also exists in XHTML and generic XML. The same syntax
|
|
can also be used inside in the ‘<code class=css>@media</code>’
|
|
and ‘<code class=css>@import</code>’ rules of CSS.
|
|
|
|
<p>However, the parsing rules for media queries are incompatible with those
|
|
of HTML4 so that they are consistent with those of media queries used in
|
|
CSS.
|
|
|
|
<p class=note>HTML5 <a href="#HTML5"
|
|
rel=biblioentry>[HTML5]<!--{{HTML5}}--></a> (at the moment of writing
|
|
still work in progress) references the Media Queries specification
|
|
directly and thus updates the rules for HTML.
|
|
|
|
<h2 id=media0><span class=secno>2. </span>Media Queries</h2>
|
|
|
|
<p>A media query consists of a media type and zero or more <span
|
|
class=index id=expressions>expressions</span> that check for the
|
|
conditions of particular <span class=index id=media-features>media
|
|
features</span>.
|
|
|
|
<p>Statements regarding media queries in this section assume the <a
|
|
href="#syntax">syntax section</a> is followed. Media queries that do not
|
|
conform to the syntax are discussed in the <a href="#error-handling">error
|
|
handling section</a>. I.e. the syntax takes precedence over requirements
|
|
in this section.
|
|
|
|
<div class=example>
|
|
<p>Here is a simple example written in HTML:</p>
|
|
|
|
<pre><code><link rel="stylesheet" media="screen and (color)" href="example.css" /></code></pre>
|
|
|
|
<p>This example expresses that a certain style sheet
|
|
(<code>example.css</code>) applies to devices of a certain media type
|
|
(‘<code class=css>screen</code>’) with certain feature (it
|
|
must be a color screen).</p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Here the same media query written in an @import-rule in CSS:</p>
|
|
|
|
<pre><code>@import url(color.css) screen and (color);</code></pre>
|
|
</div>
|
|
|
|
<p>A 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 (as defined in the
|
|
"Applies to" line), and all expressions in the media query are true.
|
|
|
|
<p>A shorthand syntax is offered for media queries that apply to all media
|
|
types; the keyword ‘<code class=css>all</code>’ can be left
|
|
out (along with the trailing ‘<code class=css>and</code>’).
|
|
I.e. if the media type is not explicitly given it is ‘<code
|
|
class=css>all</code>’.
|
|
|
|
<div class=example>
|
|
<p>I.e. these are identical:</p>
|
|
|
|
<pre><code>@media all and (min-width:500px) { … }
|
|
@media (min-width:500px) { … }</code></pre>
|
|
|
|
<p>As are these:</p>
|
|
|
|
<pre><code>@media (orientation: portrait) { … }
|
|
@media all and (orientation: portrait) { … }</code></pre>
|
|
</div>
|
|
|
|
<p>Several media queries can be combined in a media query list. A
|
|
comma-separated list of media queries. If one or more of the media queries
|
|
in the comma-separated list are true, the whole list is true, and
|
|
otherwise false. In the media queries syntax, the comma expresses a
|
|
logical OR, while the ‘<code class=css>and</code>’ keyword
|
|
expresses a logical AND.
|
|
|
|
<div class=example>
|
|
<p>Here is an example of several media queries in a comma-separated list
|
|
using the an @media-rule in CSS:</p>
|
|
|
|
<pre><code>@media <em>screen and (color), projection and (color)</em> { … }</code></pre>
|
|
</div>
|
|
|
|
<p>If the media query list is empty (i.e. the declaration is the empty
|
|
string or consists solely of whitespace) it evaluates to true.
|
|
|
|
<div class=example>
|
|
<p>I.e. these are equivalent:</p>
|
|
|
|
<pre><code>@media all { … }
|
|
@media { … }</code></pre>
|
|
</div>
|
|
|
|
<p>The logical NOT can be expressed through the ‘<code
|
|
class=css>not</code>’ keyword. The presence of the keyword
|
|
‘<code class=css>not</code>’ at the beginning of the media
|
|
query negates the result. I.e., if the media query had been true without
|
|
the ‘<code class=css>not</code>’ keyword it will become false,
|
|
and vice versa. User agents that only support media types (as described in
|
|
HTML4) will not recognize the ‘<code class=css>not</code>’
|
|
keyword and the associated style sheet is therefore not applied.
|
|
|
|
<div class=example>
|
|
<pre><code><link rel="stylesheet" media="<em>not screen and (color)</em>" href="example.css" /></code></pre>
|
|
</div>
|
|
|
|
<p>The keyword ‘<code class=css>only</code>’ can also be used
|
|
to hide style sheets from older user agents. User agents must process
|
|
media queries starting with ‘<code class=css>only</code>’ as
|
|
if the ‘<code class=css>only</code>’ keyword was not present.
|
|
|
|
<div class=example>
|
|
<pre><code><link rel="stylesheet" media="<em>only screen and (color)</em>" href="example.css" /></code></pre>
|
|
</div>
|
|
|
|
<p>The media queries syntax can be used with HTML, XHTML, XML <a
|
|
href="#XMLSTYLE" rel=biblioentry>[XMLSTYLE]<!--{{XMLSTYLE}}--></a> and the
|
|
@import and @media rules of CSS.
|
|
|
|
<div class=example>
|
|
<p>Here is the same example written in HTML, XHTML, XML, @import and
|
|
@media:</p>
|
|
|
|
<pre><code><link rel="stylesheet" media="<em>screen and (color), projection and (color)</em>" rel="stylesheet" href="example.css"></code></pre>
|
|
|
|
<pre><code><link rel="stylesheet" media="<em>screen and (color), projection and (color)</em>" rel="stylesheet" href="example.css" /></code></pre>
|
|
|
|
<pre><code><?xml-stylesheet media="<em>screen and (color), projection and (color)</em>" rel="stylesheet" href="example.css" ?></code></pre>
|
|
|
|
<pre><code>@import url(example.css) <em>screen and (color), projection and (color)</em>;</code></pre>
|
|
|
|
<pre><code>@media <em>screen and (color), projection and (color)</em> { … }</code></pre>
|
|
|
|
<p class=note>The <a href="#XMLSTYLE"
|
|
rel=biblioentry>[XMLSTYLE]<!--{{XMLSTYLE}}--></a> specification has not
|
|
yet been updated to use media queries in the <code>media</code>
|
|
pseudo-attribute.</p>
|
|
</div>
|
|
|
|
<p>If a media feature does not apply to the device where the UA is running,
|
|
expressions involving the media feature will be false.
|
|
|
|
<div class=example>
|
|
<p>The media feature ‘<code
|
|
class=css>device-aspect-ratio</code>’ only applies to visual
|
|
devices. On an aural device, expressions involving ‘<code
|
|
class=css>device-aspect-ratio</code>’ will therefore always be
|
|
false:</p>
|
|
|
|
<pre><code><link rel="stylesheet" media="aural and (device-aspect-ratio: 16/9)" href="example.css" /></code></pre>
|
|
</div>
|
|
|
|
<p>Expressions will always be false if the unit of measurement does not
|
|
apply to the device.
|
|
|
|
<div class=example>
|
|
<p>The ‘<code class=css>px</code>’ unit does not apply to
|
|
‘<code class=css>speech</code>’ devices so the following
|
|
media query is always false:</p>
|
|
|
|
<pre><code><link rel="stylesheet" media="speech and (min-device-width: 800px)" href="example.css" /></code></pre>
|
|
|
|
<p>Note that the media queries in this example would have been true if the
|
|
keyword ‘<code class=css>not</code>’ had been added to the
|
|
beginning of the media query.</p>
|
|
</div>
|
|
|
|
<p>To avoid circular dependencies, it is never necessary to apply the style
|
|
sheet in order to evaluate expressions. For example, the aspect ratio of a
|
|
printed document may be influenced by a style sheet, but expressions
|
|
involving ‘<code class=css>device-aspect-ratio</code>’ will be
|
|
based on the default aspect ratio of the user agent.
|
|
|
|
<p class=note>User agents are expected, but not required, to re-evaluate
|
|
and re-layout the page in response to changes in the user environment, for
|
|
example if the device is tilted from landscape to portrait mode.
|
|
|
|
<h2 id=syntax><span class=secno>3. </span>Syntax</h2>
|
|
|
|
<p>The media query syntax is described in terms of the <a
|
|
href="http://www.w3.org/TR/CSS21/grammar.html">CSS2 grammar</a>. As such,
|
|
rules not defined here are defined in CSS2. The
|
|
<code>media_query_list</code> production defined below replaces the
|
|
<code>media_list</code> production from CSS2. <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<pre>media_query_list
|
|
: S* [media_query [ ',' S* media_query ]* ]?
|
|
;
|
|
media_query
|
|
: [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
|
|
| expression [ AND S* expression ]*
|
|
;
|
|
media_type
|
|
: IDENT
|
|
;
|
|
expression
|
|
: '(' S* media_feature S* [ ':' S* expr ]? ')' S*
|
|
;
|
|
media_feature
|
|
: IDENT
|
|
;</pre>
|
|
|
|
<p>COMMENT tokens, as defined by CSS2, do not occur in the grammar (to keep
|
|
it readable), but any number of these tokens may appear anywhere between
|
|
other tokens. <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<p>The following new definitions are introduced:
|
|
|
|
<pre>L l|\\0{0,4}(4c|6c)(\r\n|[ \t\r\n\f])?|\\l
|
|
Y y|\\0{0,4}(59|79)(\r\n|[ \t\r\n\f])?|\\y</pre>
|
|
|
|
<p>The following new tokens are introduced:
|
|
|
|
<pre>{O}{N}{L}{Y} {return ONLY;}
|
|
{N}{O}{T} {return NOT;}
|
|
{A}{N}{D} {return AND;}
|
|
{num}{D}{P}{I} {return RESOLUTION;}
|
|
{num}{D}{P}{C}{M} {return RESOLUTION;}</pre>
|
|
|
|
<p><code>RESOLUTION</code> is to be added to the CSS2 <code>term</code>
|
|
production.
|
|
|
|
<p>CSS style sheets are generally case-insensitive, and this is also the
|
|
case for media queries.
|
|
|
|
<p>In addition to conforming to the syntax, each media query needs to use
|
|
media types and media features according to their respective specification
|
|
in order to be considered conforming.
|
|
|
|
<div class=example>
|
|
<p>Only the first media query is conforming in the example below because
|
|
the "example" media type does not exist.</p>
|
|
|
|
<pre><code>@media all { body { background:lime } }
|
|
@media example { body { background:red } }</code></pre>
|
|
</div>
|
|
|
|
<h3 id=error-handling><span class=secno>3.1. </span>Error Handling</h3>
|
|
|
|
<p>For media queries that are not conforming user agents need to follow the
|
|
rules described in this section.
|
|
|
|
<ul>
|
|
<li>
|
|
<p><strong>Unknown media types.</strong> Unknown media types evaluate to
|
|
false. Effectively, they are treated identically to known media types
|
|
that do not match the media type of the device.</p>
|
|
|
|
<div class=example>
|
|
<p>The media query "<code>unknown</code>" will evaluate to false, unless
|
|
<code>unknown</code> is actually a supported media type. Similarly,
|
|
"<code>not unknown</code>" will evaluate to true.</p>
|
|
</div>
|
|
|
|
<p class=note>Unknown media types are distinct from media types that do
|
|
not actually match the IDENT production. Those fall under the malformed
|
|
media query clause.</p>
|
|
|
|
<li>
|
|
<p><strong>Unknown media features.</strong> User agents are to represent
|
|
a media query as "<code>not all</code>" when one of the specified media
|
|
features is not known.</p>
|
|
|
|
<div class=example>
|
|
<pre><code><link rel="stylesheet" media="screen and (max-weight: 3kg) and (color), (color)" href="example.css" /></code></pre>
|
|
|
|
<p>In this example, the first media query will be represented as
|
|
"<code>not all</code>" and evaluate to false and the second media query
|
|
is evaluated as if the first had not been specified, effectively.</p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<pre><code>@media (min-orientation:portrait) { … }</code></pre>
|
|
|
|
<p>Is represented as "<code>not all</code>" because the ‘<code
|
|
class=css>orientation</code>’ feature does not accept the
|
|
‘<code class=css>min-</code>’ prefix.</p>
|
|
</div>
|
|
|
|
<li>
|
|
<p><strong>Unknown media feature values.</strong> As with unknown media
|
|
features, user agents are to represent a media query as "<code>not
|
|
all</code>" when one of the specified media feature values is not known.</p>
|
|
|
|
<div class=example>
|
|
<p>The media query <code>(color:20example)</code> specifies an unknown
|
|
value for the ‘<code class=css>color</code>’ media feature
|
|
and is therefore represented as "<code>not all</code>".</p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This media query is represented as "<code>not all</code>" because
|
|
negative lengths are not allowed for the ‘<code
|
|
class=css>width</code>’ media feature:</p>
|
|
|
|
<pre><code>@media (min-width: -100px) { … }</code></pre>
|
|
</div>
|
|
|
|
<li>
|
|
<p><strong>Malformed media query.</strong> User agents are to handle
|
|
unexpected tokens encountered while parsing a media query by reading
|
|
until the end of the media query, while observing <a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#block">the rules for
|
|
matching pairs</a> of (), [], {}, "", and '', and correctly handling
|
|
escapes. Media queries with unexpected tokens are represented as
|
|
"<code>not all</code>". <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<div class=example>
|
|
<pre><code>@media (example, all,), speech { /* only applicable to speech devices */ }
|
|
@media &test, screen { /* only applicable to screen devices */ }</code></pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>The following is an malformed media query because having no space
|
|
between ‘<code class=css>and</code>’ and the expression is
|
|
not allowed. (That is reserved for the functional notation syntax.)</p>
|
|
|
|
<pre><code>@media all and(color) { … }</code></pre>
|
|
</div>
|
|
|
|
<p>Media queries are expected to follow the error handling rules of the
|
|
host language as well.</p>
|
|
|
|
<div class=example>
|
|
<pre><code>@media test;,all { body { background:lime } }</code></pre>
|
|
|
|
<p>… will not apply because the semicolon terminates the
|
|
<code>@media</code> rule in CSS.</p>
|
|
</div>
|
|
</ul>
|
|
|
|
<h2 id=media1><span class=secno>4. </span>Media features</h2>
|
|
|
|
<p>Syntactically, media features resemble CSS properties: they have names
|
|
and accept certain values. There are, however, several important
|
|
differences between properties and media features:
|
|
|
|
<ul>
|
|
<li>Properties are used in <em>declarations</em> to give information about
|
|
how to present a document. Media features are used in
|
|
<em>expressions</em> to describe requirements of the output device.
|
|
|
|
<li>Most media features accept optional ‘<code
|
|
class=css>min-</code>’ or ‘<code class=css>max-</code>’
|
|
prefixes to express "greater or equal to" and "smaller or equal to"
|
|
constraints. This syntax is used to avoid "<" and ">" characters
|
|
which may conflict with HTML and XML. Those media features that accept
|
|
prefixes will most often be used with prefixes, but can also be used
|
|
alone.
|
|
|
|
<li>Properties always require a value to form a declaration. Media
|
|
features, on the other hand, can also be used without a value. For a
|
|
media feature <var>feature</var>, <code>(<var>feature</var>)</code> will
|
|
evaluate to true if <code>(<var>feature</var>:<var>x</var>)</code> will
|
|
evaluate to true for a value <var>x</var> other than zero or zero
|
|
followed by a unit identifier (i.e., other than <code>0</code>,
|
|
<code>0px</code>, <code>0em</code>, etc.). Media features that are
|
|
prefixed by min/max cannot be used without a value. When a media feature
|
|
prefixed with min/max is used without a value it makes the media query
|
|
malformed.
|
|
|
|
<li>Properties may accept more complex values, e.g., calculations that
|
|
involve several other values. Media features only accept single values:
|
|
one keyword, one number, or a number with a unit identifier. (The only
|
|
exceptions are the ‘<code class=css>aspect-ratio</code>’ and
|
|
‘<code class=css>device-aspect-ratio</code>’ media features.)
|
|
|
|
</ul>
|
|
|
|
<div class=example>
|
|
<p>For example, the ‘<code class=css>color</code>’ media
|
|
feature can form expressions without a value (‘<code
|
|
class=css>(color)</code>’), or with a value (‘<code
|
|
class=css>(min-color: 1)</code>’).</p>
|
|
</div>
|
|
|
|
<p class=note>This specification defines media features usable with visual
|
|
and tactile devices. Similarly, media features can be defined for aural
|
|
media types.
|
|
|
|
<h3 id=width><span class=secno>4.1. </span>width</h3>
|
|
|
|
<div class=media-feature><span class=label>Value:</span> <length><br>
|
|
<span class=label>Applies to:</span> visual and tactile media types<br>
|
|
<span class=label>Accepts min/max prefixes:</span> yes<br>
|
|
</div>
|
|
|
|
<p>The ‘<code class=css>width</code>’ media feature describes
|
|
the width of the targeted display area of the output device. For
|
|
continuous media, this is the width of the viewport (as described by CSS2,
|
|
section 9.1.1 <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>) including the size of a
|
|
rendered scroll bar (if any). For paged media, this is the width of the
|
|
page box (as described by CSS2, section 13.2 <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>).
|
|
|
|
<p>A specified <length> cannot be negative.
|
|
|
|
<div class=example>
|
|
<p>For example, this media query expresses that the style sheet is usable
|
|
on printed output wider than 25cm:</p>
|
|
|
|
<pre><code><link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" /></code></pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>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:</p>
|
|
|
|
<pre><code>@media screen and (min-width: 400px) and (max-width: 700px) { … }</code></pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This media query expresses that style sheet is usable on screen and
|
|
handheld devices if the width of the viewport is greater than 20em.</p>
|
|
|
|
<pre><code>@media handheld and (min-width: 20em),
|
|
screen and (min-width: 20em) { … }</code></pre>
|
|
|
|
<p>The ‘<code class=css>em</code>’ value is relative to the
|
|
font size of the root element.</p>
|
|
</div>
|
|
|
|
<h3 id=height><span class=secno>4.2. </span>height</h3>
|
|
|
|
<div class=media-feature><span class=label>Value:</span> <length><br>
|
|
<span class=label>Applies to:</span> visual and tactile media types<br>
|
|
<span class=label>Accepts min/max prefixes:</span> yes<br>
|
|
</div>
|
|
|
|
<p>The ‘<code class=css>height</code>’ media feature describes
|
|
the height of the targeted display area of the output device. For
|
|
continuous media, this is the height of the viewport including the size of
|
|
a rendered scroll bar (if any). For paged media, this is the height of the
|
|
page box.
|
|
|
|
<p>A specified <length> cannot be negative.
|
|
|
|
<h3 id=device-width><span class=secno>4.3. </span>device-width</h3>
|
|
|
|
<div class=media-feature><span class=label>Value:</span> <length><br>
|
|
<span class=label>Applies to:</span> visual and tactile media types<br>
|
|
<span class=label>Accepts min/max prefixes:</span> yes<br>
|
|
</div>
|
|
|
|
<p>The ‘<code class=css>device-width</code>’ media feature
|
|
describes the width of the rendering surface of the output device. For
|
|
continuous media, this is the width of the screen. For paged media, this
|
|
is the width of the page sheet size.
|
|
|
|
<p>A specified <length> cannot be negative.
|
|
|
|
<div class=example>
|
|
<pre><code>@media screen and (device-width: 800px) { … }</code></pre>
|
|
|
|
<p>In the example above, the style sheet will apply only to screens that
|
|
currently displays exactly 800 horizontal pixels. The ‘<code
|
|
class=css>px</code>’ unit is of the logical kind, as described in
|
|
the <a href="#units">Units</a> section.</p>
|
|
</div>
|
|
|
|
<h3 id=device-height><span class=secno>4.4. </span>device-height</h3>
|
|
|
|
<div class=media-feature><span class=label>Value:</span> <length><br>
|
|
<span class=label>Applies to:</span> visual and tactile media types<br>
|
|
<span class=label>Accepts min/max prefixes:</span> yes<br>
|
|
</div>
|
|
|
|
<p>The ‘<code class=css>device-height</code>’ media feature
|
|
describes the height of the rendering surface of the output device. For
|
|
continuous media, this is the height of the screen. For paged media, this
|
|
is the height of the page sheet size.
|
|
|
|
<p>A specified <length> cannot be negative.
|
|
|
|
<div class=example>
|
|
<pre><code><link rel="stylesheet" media="screen and (device-height: 600px)" /></code></pre>
|
|
|
|
<p>In the example above, the style sheet will apply only to screens that
|
|
have exactly 600 vertical pixels. Note that the definition of the
|
|
‘<code class=css>px</code>’ unit is the same as in other
|
|
parts of CSS.</p>
|
|
</div>
|
|
|
|
<h3 id=orientation><span class=secno>4.5. </span>orientation</h3>
|
|
|
|
<div class=media-feature><span class=label>Value:</span> portrait |
|
|
landscape<br>
|
|
<span class=label>Applies to:</span> bitmap media types<br>
|
|
<span class=label>Accepts min/max prefixes:</span> no<br>
|
|
</div>
|
|
|
|
<p>The ‘<code class=css>orientation</code>’ media feature is
|
|
‘<code class=css>portrait</code>’ when the value of the
|
|
‘<code class=css>height</code>’ media feature is greater than
|
|
or equal to the value of the ‘<code class=css>width</code>’
|
|
media feature. Otherwise ‘<code class=css>orientation</code>’
|
|
is ‘<code class=css>landscape</code>’.
|
|
|
|
<div class=example>
|
|
<pre><code>@media all and (orientation:portrait) { … }
|
|
@media all and (orientation:landscape) { … }</code></pre>
|
|
</div>
|
|
|
|
<h3 id=aspect-ratio><span class=secno>4.6. </span>aspect-ratio</h3>
|
|
|
|
<div class=media-feature><span class=label>Value:</span> <ratio><br>
|
|
<span class=label>Applies to:</span> bitmap media types<br>
|
|
<span class=label>Accepts min/max prefixes:</span> yes<br>
|
|
</div>
|
|
|
|
<p>The ‘<code class=css>aspect-ratio</code>’ media feature is
|
|
defined as the ratio of the value of the ‘<code
|
|
class=css>width</code>’ media feature to the value of the
|
|
‘<code class=css>height</code>’ media feature.
|
|
|
|
<h3 id=device-aspect-ratio><span class=secno>4.7.
|
|
</span>device-aspect-ratio</h3>
|
|
|
|
<div class=media-feature><span class=label>Value:</span> <ratio><br>
|
|
<span class=label>Applies to:</span> bitmap media types<br>
|
|
<span class=label>Accepts min/max prefixes:</span> yes<br>
|
|
</div>
|
|
|
|
<p>The ‘<code class=css>device-aspect-ratio</code>’ media
|
|
feature is defined as the ratio of the value of the ‘<code
|
|
class=css>device-width</code>’ media feature to the value of the
|
|
‘<code class=css>device-height</code>’ media feature.
|
|
|
|
<div class=example>
|
|
<p>For example, if a screen device with square pixels has 1280 horizontal
|
|
pixels and 720 vertical pixels (commonly referred to as "16:9"), the
|
|
following Media Queries will all match the device:</p>
|
|
|
|
<pre><code>@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) { … }</code></pre>
|
|
</div>
|
|
|
|
<h3 id=color><span class=secno>4.8. </span>color</h3>
|
|
|
|
<div class=media-feature><span class=label>Value:</span>
|
|
<integer><br>
|
|
<span class=label>Applies to:</span> visual media types<br>
|
|
<span class=label>Accept min/max prefixes:</span> yes<br>
|
|
</div>
|
|
|
|
<p>The ‘<code class=css>color</code>’ media feature describes
|
|
the number of bits per color component of the output device. If the device
|
|
is not a color device, the value is zero.
|
|
|
|
<p>A specified <integer> cannot be negative.
|
|
|
|
<div class=example>
|
|
<p>For example, these two media queries express that a style sheet applies
|
|
to all color devices:</p>
|
|
|
|
<pre><code>@media all and (color) { … }
|
|
@media all and (min-color: 1) { … }</code></pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This media query expresses that a style sheet applies to color devices
|
|
with 2 or more bits per color component:</p>
|
|
|
|
<pre><code>@media all and (min-color: 2) { … }</code></pre>
|
|
</div>
|
|
|
|
<p>If different color components are represented by different number of
|
|
bits, the smallest number is used.
|
|
|
|
<div class=example>
|
|
<p>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 ‘<code class=css>color</code>’ media feature will
|
|
have a value of 2.</p>
|
|
</div>
|
|
|
|
<p>In a device with indexed colors, the minimum number of bits per color
|
|
component in the lookup table is used.
|
|
|
|
<p class=note>The described functionality is only able to describe color
|
|
capabilities at a superficial level. If further functionality is required,
|
|
RFC2531 <a href="#RFC2531" rel=biblioentry>[RFC2531]<!--{{RFC2531}}--></a>
|
|
provides more specific media features which may be supported at a later
|
|
stage.
|
|
|
|
<h3 id=color-index><span class=secno>4.9. </span>color-index</h3>
|
|
|
|
<div class=media-feature><span class=label>Value:</span>
|
|
<integer><br>
|
|
<span class=label>Applies to:</span> visual media types<br>
|
|
<span class=label>Accepts min/max prefixes:</span> yes<br>
|
|
</div>
|
|
|
|
<p>The ‘<code class=css>color-index</code>’ media feature
|
|
describes the number of entries in the color lookup table of the output
|
|
device. If the device does not use a color lookup table, the value is
|
|
zero.
|
|
|
|
<p>A specified <integer> cannot be negative.
|
|
|
|
<div class=example>
|
|
<p>For example, here are two ways to express that a style sheet applies to
|
|
all color index devices:</p>
|
|
|
|
<pre><code>@media all and (color-index) { … }
|
|
@media all and (min-color-index: 1) { … }</code></pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This media query expresses that a style sheet applies to a color index
|
|
device with 256 or more entries:</p>
|
|
|
|
<pre><code><?xml-stylesheet media="all and (min-color-index: 256)"
|
|
href="http://www.example.com/…" ?></code></pre>
|
|
</div>
|
|
|
|
<h3 id=monochrome><span class=secno>4.10. </span>monochrome</h3>
|
|
|
|
<div class=media-feature><span class=label>Value:</span>
|
|
<integer><br>
|
|
<span class=label>Applies to:</span> visual media types<br>
|
|
<span class=label>Accepts min/max prefixes:</span> yes<br>
|
|
</div>
|
|
|
|
<p>The ‘<code class=css>monochrome</code>’ 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.
|
|
|
|
<p>A specified <integer> cannot be negative.
|
|
|
|
<div class=example>
|
|
<p>For example, here are two ways to express that a style sheet applies to
|
|
all monochrome devices:</p>
|
|
|
|
<pre><code>@media all and (monochrome) { … }
|
|
@media all and (min-monochrome: 1) { … }</code></pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Express that a style sheet applies to monochrome devices with more than
|
|
2 bits per pixels:</p>
|
|
|
|
<pre><code>@media all and (min-monochrome: 2) { … }</code></pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Express that there is one style sheet for color pages and another for
|
|
monochrome:</p>
|
|
|
|
<pre><code><link rel="stylesheet" media="print and (color)" href="http://…" />
|
|
<link rel="stylesheet" media="print and (monochrome)" href="http://…" /></code></pre>
|
|
</div>
|
|
|
|
<h3 id=resolution><span class=secno>4.11. </span>resolution</h3>
|
|
|
|
<div class=media-feature><span class=label>Value:</span>
|
|
<resolution><br>
|
|
<span class=label>Applies to:</span> bitmap media types<br>
|
|
<span class=label>Accepts min/max prefixes:</span> yes<br>
|
|
</div>
|
|
|
|
<p>The ‘<code class=css>resolution</code>’ media feature
|
|
describes the resolution of the output device, i.e. the density of the
|
|
pixels. When querying devices with non-square pixels, in ‘<code
|
|
class=css>min-resolution</code>’ queries the least-dense dimension
|
|
must be compared to the specified value and in ‘<code
|
|
class=css>max-resolution</code>’ queries the most-dense dimensions
|
|
must be compared instead. A ‘<code
|
|
class=css>resolution</code>’ (without a "min-" or "max-" prefix)
|
|
query never matches a device with non-square pixels.
|
|
|
|
<div class=example>
|
|
<p>For example, this media query expresses that a style sheet is usable on
|
|
devices with resolution greater than 300 dots per inch:</p>
|
|
|
|
<pre><code>@media print and (min-resolution: 300dpi) { … }</code></pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This media query expresses that a style sheet is usable on devices with
|
|
resolution greater than 118 dots per centimeter:</p>
|
|
|
|
<pre><code>@media print and (min-resolution: 118dpcm) { … }</code></pre>
|
|
</div>
|
|
|
|
<h3 id=scan><span class=secno>4.12. </span>scan</h3>
|
|
|
|
<div class=media-feature><span class=label>Value:</span> progressive |
|
|
interlace<br>
|
|
<span class=label>Applies to:</span> "tv" media types<br>
|
|
<span class=label>Accepts min/max prefixes:</span> no<br>
|
|
</div>
|
|
|
|
<p>The ‘<code class=css>scan</code>’ media feature describes
|
|
the scanning process of "tv" output devices.
|
|
|
|
<div class=example>
|
|
<p>For example, this media query expresses that a style sheet is usable on
|
|
tv devices with progressive scanning:</p>
|
|
|
|
<pre><code>@media tv and (scan: progressive) { … }</code></pre>
|
|
</div>
|
|
|
|
<h3 id=grid><span class=secno>4.13. </span>grid</h3>
|
|
|
|
<div class=media-feature><span class=label>Value:</span>
|
|
<integer><br>
|
|
<span class=label>Applies to:</span> visual and tactile media types<br>
|
|
<span class=label>Accepts min/max prefixes:</span> no<br>
|
|
</div>
|
|
|
|
<p>The ‘<code class=css>grid</code>’ media feature is used to
|
|
query whether the output device is grid or bitmap. If the output device is
|
|
grid-based (e.g., a "tty" terminal, or a phone display with only one fixed
|
|
font), the value will be 1. Otherwise, the value will be 0.
|
|
|
|
<p>Only 0 and 1 are valid values. (This includes -0.) Thus everything else
|
|
creates a malformed media query.
|
|
|
|
<div class=example>
|
|
<p>Here are two examples:</p>
|
|
|
|
<pre><code>@media handheld and (grid) and (max-width: 15em) { … }
|
|
<span class=css-example>@media handheld and (grid) and (device-max-height: 7em) { … }</span></code></pre>
|
|
</div>
|
|
|
|
<h2 id=values><span class=secno>5. </span>Values</h2>
|
|
|
|
<p>This specification also introduces two new values.
|
|
|
|
<p>The <ratio> value is a positive (not zero or negative) <integer>
|
|
followed by optional whitespace, followed by a solidus (‘<code
|
|
class=css>/</code>’), followed by optional whitespace, followed by a
|
|
positive <integer>.
|
|
|
|
<p>The <resolution> value is a positive <number> immediately followed
|
|
by a unit identifier (‘<code class=css>dpi</code>’ or
|
|
‘<code class=css>dpcm</code>’).
|
|
|
|
<p>Whitespace, <integer>, <number> and other values used by this
|
|
specification are the same as in other parts of CSS, normatively defined
|
|
by CSS 2.1. <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<h2 id=units><span class=secno>6. </span>Units</h2>
|
|
|
|
<p>The units used in media queries are the same as in other parts of CSS.
|
|
For example, the pixel unit represents CSS pixels and not physical pixels.
|
|
|
|
<p>Relative units in media queries are based on the initial value. For
|
|
example, in HTML, the ‘<code class=css>em</code>’ unit is
|
|
relative to the initial value of ‘<code
|
|
class=property>font-size</code>’.
|
|
|
|
<h3 id=resolution0><span class=secno>6.1. </span>Resolution</h3>
|
|
|
|
<p>The ‘<code class=css>dpi</code>’ and ‘<code
|
|
class=css>dpcm</code>’ units describe the resolution of an output
|
|
device, i.e., the density of device pixels. Resolution unit identifiers
|
|
are:
|
|
|
|
<dl>
|
|
<dt>dpi
|
|
|
|
<dd>dots per inch
|
|
|
|
<dt>dpcm
|
|
|
|
<dd>dots per centimeter
|
|
</dl>
|
|
|
|
<p>In this specification, these units are only used in the ‘<code
|
|
class=css>resolution</code>’ media feature.
|
|
|
|
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
|
|
|
|
<p>This specification is the product of the W3C Working Group on Cascading
|
|
Style Sheets.
|
|
|
|
<p>Comments from Björn Höhrmann, Christoph Päper, Chris
|
|
Lilley, Simon Pieters, Rijk van Geijtenbeek, Sigurd Lerstad, Arve
|
|
Bersvendsen, Susan Lesch, Philipp Hoschka, Roger Gimson, Steven Pemberton,
|
|
Simon Kissane, Melinda Grant, and L. David Baron improved this
|
|
specification.
|
|
|
|
<h2 class=no-num id=references>References</h2>
|
|
|
|
<h3 class=no-num id=normative-references>Normative references</h3>
|
|
<!--begin-normative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS21>[CSS21]
|
|
|
|
<dd>Bert Bos; et al. <a
|
|
href="http://www.w3.org/TR/2009/CR-CSS2-20090908"><cite>Cascading Style
|
|
Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 8 September
|
|
2009. W3C Candidate Recommendation. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2009/CR-CSS2-20090908">http://www.w3.org/TR/2009/CR-CSS2-20090908</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
|
|
<h3 class=no-num id=other-references>Other references</h3>
|
|
<!--begin-informative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=HTML401>[HTML401]
|
|
|
|
<dd>David Raggett; Ian Jacobs; Arnaud Le Hors. <a
|
|
href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01
|
|
Specification.</cite></a> 24 December 1999. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=HTML5>[HTML5]
|
|
|
|
<dd>Ian Hickson. <a
|
|
href="http://www.w3.org/TR/2010/WD-html5-20100624/"><cite>HTML
|
|
5.</cite></a> 24 June 2010. W3C Working Draft. (Work in progress.) URL:
|
|
<a
|
|
href="http://www.w3.org/TR/2010/WD-html5-20100624/">http://www.w3.org/TR/2010/WD-html5-20100624/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=RFC2531>[RFC2531]
|
|
|
|
<dd>G. Klyne; L. McIntyre. <a
|
|
href="http://www.ietf.org/rfc/rfc2531.txt"><cite>Content Feature Schema
|
|
for Internet Fax.</cite></a> March 1999. Internet RFC 2531. URL: <a
|
|
href="http://www.ietf.org/rfc/rfc2531.txt">http://www.ietf.org/rfc/rfc2531.txt</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=XMLSTYLE>[XMLSTYLE]
|
|
|
|
<dd>James Clark. <a
|
|
href="http://www.w3.org/1999/06/REC-xml-stylesheet-19990629"><cite>Associating
|
|
Style Sheets with XML documents.</cite></a> 29 June 1999. W3C
|
|
Recommendation. URL: <a
|
|
href="http://www.w3.org/1999/06/REC-xml-stylesheet-19990629">http://www.w3.org/1999/06/REC-xml-stylesheet-19990629</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-informative-->
|