8000 csswg-drafts/mediaqueries/Overview.html at abeb2269cae303ccf1bf6c9608377a056003a3d0 · w3c/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
executable file
·
2318 lines (1917 loc) · 153 KB

Overview.html

File metadata and controls

executable file
·
2318 lines (1917 loc) · 153 KB
<!DOCTYPE html><html lang=en><head>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<title>Media Queries Level 4</title>
<link href=../default.css rel=stylesheet type=text/css>
<link href=../csslogo.ico rel="shortcut icon" type=image/x-icon>
<style>
body {
background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat white;
background-attachment: fixed;
color: black;
font-family: sans-serif;
margin: 0 auto;
max-width: 50em;
padding: 2em 1em 2em 70px;
}
:link { color: #00C; background: transparent }
:visited { color: #609; background: transparent }
a[href]:active { color: #C00; background: transparent }
a[href]:hover { background: #ffa }
a[href] img { border-style: none }
h1, h2, h3, h4, h5, h6 { text-align: left }
h1, h2, h3 { color: #005A9C; }
h1 { font: 170% sans-serif }
h2 { font: 140% sans-serif }
h3 { font: 120% sans-serif }
h4 { font: bold 100% sans-serif }
h5 { font: italic 100% sans-serif }
h6 { font: small-caps 100% sans-serif }
.hide { display: none }
div.head { margin-bottom: 1em }
div.head h1 { margin-top: 2em; clear: both }
div.head table { margin-left: 2em; margin-top: 2em }
p.copyright { font-size: small }
p.copyright small { font-size: small }
pre { margin-left: 2em }
dt { font-weight: bold }
ul.toc, ol.toc {
list-style: none;
}
</style>
<style>svg.railroad-diagram{background-color:hsl(30,20%,95%);}svg.railroad-diagram path{stroke-width:3;stroke:black;fill:rgba(0,0,0,0);}svg.railroad-diagram text{font:bold 14px monospace;text-anchor:middle;}svg.railroad-diagram text.label{text-anchor:start;}svg.railroad-diagram text.comment{font:italic 12px monospace;}svg.railroad-diagram rect{stroke-width:3;stroke:black;fill:hsl(120,100%,90%);}</style><style>svg.railroad-diagram{background-color:hsl(30,20%,95%);}svg.railroad-diagram path{stroke-width:3;stroke:black;fill:rgba(0,0,0,0);}svg.railroad-diagram text{font:bold 14px monospace;text-anchor:middle;}svg.railroad-diagram text.label{text-anchor:start;}svg.railroad-diagram text.comment{font:italic 12px monospace;}svg.railroad-diagram rect{stroke-width:3;stroke:black;fill:hsl(120,100%,90%);}</style><style>svg.railroad-diagram{background-color:hsl(30,20%,95%);}svg.railroad-diagram path{stroke-width:3;stroke:black;fill:rgba(0,0,0,0);}svg.railroad-diagram text{font:bold 14px monospace;text-anchor:middle;}svg.railroad-diagram text.label{text-anchor:start;}svg.railroad-diagram text.comment{font:italic 12px monospace;}svg.railroad-diagram rect{stroke-width:3;stroke:black;fill:hsl(120,100%,90%);}</style><style>svg.railroad-diagram{background-color:hsl(30,20%,95%);}svg.railroad-diagram path{stroke-width:3;stroke:black;fill:rgba(0,0,0,0);}svg.railroad-diagram text{font:bold 14px monospace;text-anchor:middle;}svg.railroad-diagram text.label{text-anchor:start;}svg.railroad-diagram text.comment{font:italic 12px monospace;}svg.railroad-diagram rect{stroke-width:3;stroke:black;fill:hsl(120,100%,90%);}</style><style>
#pointer-hover-table { margin: 1em auto; text-align: center; border-collapse: collapse; max-width: 40em; }
#pointer-hover-table td, #pointer-hover-table th { padding: .5em; }
#pointer-hover-table thead tr+tr th { border-bottom: 1px solid silver; }
#pointer-hover-table tbody td:first-of-type { border-left: 1px solid silver; }
</style>
</head>
<body class=h-entry>
<div class=head>
<p data-fill-with=logo><a class=logo href=http://www.w3.org/>
<img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72>
</a>
</p>
<h1 class="p-name no-ref" id=title>Media Queries Level 4</h1>
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
<span class=dt-updated><span class=value-title title=20140129>29 January 2014</span></span></span></h2>
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/mediaqueries4/>http://dev.w3.org/csswg/mediaqueries4/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/mediaqueries4/>http://dev.w3.org/csswg/mediaqueries4/</a>
<dt>Feedback:</dt>
<dd><a href="mailto:www-style@w3.org?subject=%5Bmediaqueries%5D%20feedback">www-style@w3.org</a>
with subject line
“<kbd>[mediaqueries] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)<dt>Test Suite:<dd>None Yet<dt>Editors:
<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:florian@rivoal.net>Florian Rivoal</a> (<span class="p-org org">Invited Expert</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://xanthir.com/contact/>Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)<dt>Former Editors:
<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:howcome@opera.com>Håkon Wium Lie</a> (<span class="p-org org">Opera</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:tantek@cs.standard.edu>Tantek Çelik</a> (<span class="p-org org">Mozilla</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:daniel@glazman.org>Daniel Glazman</a> (<span class="p-org org">Disruptive Innovations</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:annevk@annevk.nl>Anne van Kesteren</a> (<span class="p-org org">Mozilla</span>)<dt>Issue Tracking:<dd>Inline, and <a href=http://www.w3.org/Style/CSS/Tracker/products/7>http://www.w3.org/Style/CSS/Tracker/products/7</a></dl></div>
<div data-fill-with=warning></div>
<p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2013 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</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>
<hr title="Separator for header">
</div>
<h2 class="no-num no-toc no-ref heading settled heading" id=abstract><span class=content>Abstract</span></h2>
<p class=p-summary data-fill-with=abstract><a data-link-type=dfn href=#media-query title="media queries">Media Queries</a> allow authors to test and query values or features of the user agent or display device, independent of the document being rendered. They are used in the CSS @media rule to conditionally apply styles to a document, and in various other contexts and languages, such as HTML and Javascript.<p>Media Queries Level 4 describes the mechanism and syntax of media queries, media types, and media features. It extends and supersedes the features defined in Media Queries Level 3.
<a href=http://www.w3.org/TR/CSS/>CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, in speech, etc.</p>
<h2 class="no-num no-toc no-ref heading settled heading" id=status><span class=content>Status of this document</span></h2>
<div data-fill-with=status><p>
This is a public copy of the editors’ draft.
It is provided for discussion only and may change at any moment.
Its publication here does not imply endorsement of its contents by W3C.
Don’t cite this document other than as work in progress.
<p>
The (<a href=http://lists.w3.org/Archives/Public/www-style/>archived</a>) public mailing list
<a href="mailto:www-style@w3.org?Subject=%5Bmediaqueries%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>
(see <a href=http://www.w3.org/Mail/Request>instructions</a>)
is preferred for discussion of this specification.
When sending e-mail,
please put the text “mediaqueries” in the subject,
preferably like this:
“[mediaqueries] <em>…summary of comment…</em>”
<p>
This document was produced by the <a href=http://www.w3.org/Style/CSS/members>CSS Working Group</a>
(part of the <a href=http://www.w3.org/Style/>Style Activity</a>).
<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>.</div>
<div data-fill-with=at-risk></div>
<h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of contents</span></h2>
<div data-fill-with=table-of-contents><ul class=toc><li><a href=#intro><span class=secno>1</span>
Introduction</a><ul class=toc><li><a href=#placement><span class=secno>1.1</span>
Module interactions</a><li><a href=#values><span class=secno>1.2</span>
Values</a><li><a href=#units><span class=secno>1.3</span>
Units</a></ul><li><a href=#media><span class=secno>2</span>
Media Queries</a><ul class=toc><li><a href=#mq-list><span class=secno>2.1</span>
Combining Media Queries</a><li><a href=#mq-prefix><span class=secno>2.2</span>
Media Query Modifiers</a><ul class=toc><li><a href=#mq-not><span class=secno>2.2.1</span>
Negating a Media Query: the <span class=css data-link-type=maybe title=not>not</span> keyword</a><li><a href=#mq-only><span class=secno>2.2.2</span>
Hiding a Media Query From Legacy User Agents: the <span class=css data-link-type=maybe title=only>only</span> keyword</a></ul><li><a href=#media-types><span class=secno>2.3</span>
Media Types</a><li><a href=#mq-features><span class=secno>2.4</span>
Media Features</a><ul class=toc><li><a href=#mq-ranges><span class=secno>2.4.1</span>
Media Feature Types: “range” and “discrete”</a><li><a href=#mq-boolean-context><span class=secno>2.4.2</span>
Evaluating Media Features in a Boolean Context</a><li><a href=#mq-range-context><span class=secno>2.4.3</span>
Evaluating Media Features in a Range Context</a><li><a href=#mq-min-max><span class=secno>2.4.4</span>
Using “min-” and “max-” Prefixes On Range Features</a></ul></ul><li><a href=#mq-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=#mf-dimensions><span class=secno>4</span>
Screen/Device Dimensions 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=#aspect-ratio><span class=secno>4.3</span>
aspect-ratio</a><li><a href=#orientation><span class=secno>4.4</span>
orientation</a><li><a href=#device-width><span class=secno>4.5</span>
device-width</a><li><a href=#device-height><span class=secno>4.6</span>
device-height</a><li><a href=#device-aspect-ratio><span class=secno>4.7</span>
device-aspect-ratio</a></ul><li><a href=#mf-display-quality><span class=secno>5</span>
Display Quality Media Features</a><ul class=toc><li><a href=#resolution><span class=secno>5.1</span>
resolution</a><li><a href=#scan><span class=secno>5.2</span>
scan</a><li><a href=#grid><span class=secno>5.3</span>
grid</a><li><a href=#updates><span class=secno>5.4</span>
updates</a><li><a href=#mf-overflow-block><span class=secno>5.5</span>
overflow-block</a><li><a href=#mf-overflow-inline><span class=secno>5.6</span>
overflow-inline</a></ul><li><a href=#mf-colors><span class=secno>6</span>
Color Media Features</a><ul class=toc><li><a href=#color><span class=secno>6.1</span>
color</a><li><a href=#color-index><span class=secno>6.2</span>
color-index</a><li><a href=#monochrome><span class=secno>6.3</span>
monochrome</a></ul><li><a href=#mf-interaction><span class=secno>7</span>
Interaction Media Features</a><ul class=toc><li><a href= 1898 #pointer><span class=secno>7.1</span>
pointer</a><li><a href=#hover><span class=secno>7.2</span>
hover</a></ul><li><a href=#mf-environment><span class=secno>8</span>
Environment Media Features</a><ul class=toc><li><a href=#light-level><span class=secno>8.1</span>
light-level</a></ul><li><a href=#mf-scripting><span class=secno>9</span>
Scripting Media Features</a><ul class=toc><li><a href=#scripting><span class=secno>9.1</span>
scripting</a></ul><li><a href=#assorted-issues><span class=secno>10</span>
Assorted Issues</a><li><a href=#changes><span class=secno></span>
Changes</a><ul class=toc><li><a href=#changes-2012><span class=secno></span>
Changes Since the Media Queries Level 3</a></ul><li><a href=#acknowledgments><span class=secno></span>
Acknowledgments</a><li><a href=#conformance><span class=secno></span>
Conformance</a><ul class=toc><li><a href=#conventions><span class=secno></span>
Document conventions</a><li><a href=#conformance-classes><span class=secno></span>
Conformance classes</a><li><a href=#partial><span class=secno></span>
Partial implementations</a><li><a href=#experimental><span class=secno></span>
Experimental implementations</a><li><a href=#testing><span class=secno></span>
Non-experimental implementations</a></ul><li><a href=#references><span class=secno></span>
References</a><ul class=toc><li><a href=#normative><span class=secno></span>
Normative References</a><li><a href=#informative><span class=secno></span>
Informa 67F6 tive References</a></ul><li><a href=#index><span class=secno></span>
Index</a><li><a href=#property-index><span class=secno></span>
Property index</a><ul class=toc><li><a href=#media-descriptor-table><span class=secno></span>@media Descriptors</a></ul><li><a href=#issues-index><span class=secno></span>Issues Index</a></ul></div>
<h2 class="heading settled heading" data-level=1 id=intro><span class=secno>1 </span><span class=content>
Introduction</span><a class=self-link href=#intro></a></h2>
<p> <em>This section is not normative.</em>
<p> HTML4 <a data-biblio-type=informative data-link-type=biblio href=#html401 title=html401>[HTML401]</a> defined a mechanism to support media-dependent style sheets,
tailored for different <a data-link-type=dfn href=#media-type title="media types">media types</a>.
For example, a document may use different style sheets for screen and for print.
In HTML, this can be written as:
<div class=example>
<pre> &lt;link rel="stylesheet" type="text/css" media="screen" href="style.css"&gt;
&lt;link rel="stylesheet" type="text/css" media="print" href="print.css"&gt;
</pre> </div>
<p> CSS adapted and extended this functionality with its <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-conditional-3/#at-ruledef-media title=@media>@media</a> and <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-cascade-3/#at-ruledef-import title=@import>@import</a> rules,
adding the ability to query the value of individual features:
<div class=example>
Inside a CSS style sheet,
one can declare that sections apply to certain <a data-link-type=dfn href=#media-type title="media types">media types</a>:
<pre> @media screen {
* { font-family: sans-serif }
}
</pre>
<p> Similarly, stylesheets can be conditionally imported based on media queries:
<pre>@import "print-styles.css" print;</pre> </div>
<p> <a data-link-type=dfn href=#media-query title="media queries">Media queries</a> can be used with HTML, XHTML, XML <a data-biblio-type=informative data-link-type=biblio href=#xmlstyle title=xmlstyle>[XMLSTYLE]</a> and the @import and @media rules of CSS.
<div class=example>
Here is the same example written in HTML, XHTML, XML, @import and @media:
<pre> &lt;link media="screen and (color), projection and (color)"
rel="stylesheet" href="example.css"&gt;
&lt;link media="screen and (color), projection and (color)"
rel="stylesheet" href="example.css" /&gt;
&lt;?xml-stylesheet media="screen and (color), projection and (color)"
rel="stylesheet" href="example.css" ?&gt;
@import url(example.css) screen and (color), projection and (color);
@media screen and (color), projection and (color) { … }
</pre>
<p class=note> Note: The <a data-biblio-type=informative data-link-type=biblio href=#xmlstyle title=xmlstyle>[XMLSTYLE]</a> specification has not yet been updated to
use media queries in the <code>media</code> pseudo-attribute.
</div>
<h3 class="heading settled heading" data-level=1.1 id=placement><span class=secno>1.1 </span><span class=content>
Module interactions</span><a class=self-link href=#placement></a></h3>
<p> This module replaces and extends the Media Queries, Media Type and Media Features
defined in <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a> sections 7 and in <a data-biblio-type=normative data-link-type=biblio href=#mediaq title=mediaq>[MEDIAQ]</a>.
<h3 class="heading settled heading" data-level=1.2 id=values><span class=secno>1.2 </span><span class=content>
Values</span><a class=self-link href=#values></a></h3>
<p> Value types not defined in this specification, such as <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</a>,
<a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#number-value title="<number>">&lt;number&gt;</a> or <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#resolution-value title="<resolution>">&lt;resolution&gt;</a>, are defined in <a data-biblio-type=normative data-link-type=biblio href=#css3val title=css3val>[CSS3VAL]</a>. Other CSS
modules may expand the definitions of these value types.
<p> This specification also introduces some new value types.
<p> The <dfn class=css-code data-dfn-type=type data-export="" id=typedef-ratio>&lt;ratio&gt;<a class=self-link href=#typedef-ratio></a></dfn> value type is a positive (not zero or negative)
<a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</a> followed by optional whitespace, followed by a solidus ('/'),
followed by optional whitespace, followed by a positive <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</a>.
<a class="production css-code" data-link-type=type href=#typedef-ratio title="<ratio>">&lt;ratio&gt;</a>s can be ordered or compared by transforming them into the number
obtained by dividing their first <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</a> by their second <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</a>.
<p class=issue id=issue-2ae5b8ca><a class=self-link href=#issue-2ae5b8ca></a>
Reasonable to restrict <a class="production css-code" data-link-type=type href=#typedef-ratio title="<ratio>">&lt;ratio&gt;</a> to <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</a>s?
I’ve seen aspect ratios written with decimal points in real life.
<p> The <dfn class=css-code data-dfn-type=type data-export="" id=typedef-mq-boolean>&lt;mq-boolean&gt;<a class=self-link href=#typedef-mq-boolean></a></dfn> value type is an <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</a>
with the value <span class=css data-link-type=maybe title=0>0</span> or <span class=css data-link-type=maybe title=1>1</span>.
Any other integer value is invalid.
<span class=note>Note that <span class=css data-link-type=maybe title=-0>-0</span> is always equivalent to <span class=css data-link-type=maybe title=0>0</span> in CSS,
and so is also accepted as a valid <a class="production css-code" data-link-type=type href=#typedef-mq-boolean title="<mq-boolean>">&lt;mq-boolean&gt;</a> value.</span>
<h3 class="heading settled heading" data-level=1.3 id=units><span class=secno>1.3 </span><span class=content>
Units</span><a class=self-link href=#units></a></h3>
<p> The units used in media queries are the same as in other parts of CSS, as
defined in <a data-biblio-type=normative data-link-type=biblio href=#css3val title=css3val>[CSS3VAL]</a>. For example, the pixel unit represents CSS pixels and
not physical pixels.
<p> Relative units in media queries are based on the initial value, which means
that units are never based on results of declarations. For example, in HTML,
the <span class=css data-link-type=maybe title=em>em</span> unit is relative to the initial value of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-fonts-3/#propdef-font-size title=font-size>font-size</a>,
defined by the user agent or the user’s preferences,
not any styling on the page.
<h2 class="heading settled heading" data-level=2 id=media><span class=secno>2 </span><span class=content>
Media Queries</span><a class=self-link href=#media></a></h2>
<p> A <dfn data-dfn-type=dfn data-export="" id=media-query>media query<a class=self-link href=#media-query></a></dfn> is a method of testing certain aspects of the user agent
or device that the document is being displayed in.
<a data-link-type=dfn href=#media-query title="media queries">Media queries</a> are (almost) always independent of the contents of the document,
its styling,
or any other internal aspect;
they’re only dependent on “external” information
unless another feature explicitly specifies that it affects the resolution of Media Queries,
such as the <span class=css data-link-type=maybe title=@viewport>@viewport</span> rule.
<p> The syntax of a <a data-link-type=dfn href=#media-query title="media query">media query</a> consists of
an optional <a data-link-type=dfn href=#media-query-modifier title="media query modifier">media query modifier</a>,
an optional <a data-link-type=dfn href=#media-type title="media type">media type</a>,
and zero or more <a data-link-type=dfn href=#media-feature title="media features">media features</a>:
<div class=railroad><svg class=railroad-diagram height=191 viewBox="0 0 517 191" width=517>
<g transform="translate(.5 .5)">
<path d="M 20 31 v 20 m 10 -20 v 20 m -10 -10 h 20.5">
</path><g>
<path d="M40 41h0">
</path><path d="M476 41h0">
</path><path d="M40 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10">
</path><g>
<path d="M60 21h396">
</path></g><path d="M456 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10">
</path><path d="M40 41h20">
</path><g>
<path d="M60 41h74">
</path><path d="M382 41h74">
</path><g>
<path d="M134 41h0">
</path><path d="M218 41h0">
</path><path d="M134 41h20">
</path><g>
<path d="M154 41h44">
</path></g><path d="M198 41h20">
</path><path d="M134 41a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10">
</path><g>
<path d="M154 61h0">
</path><path d="M198 61h0">
</path><rect height=22 rx=10 ry=10 width=44 x=154 y=50>
</rect><text x=176 y=65>
not</text></g><path d="M198 61a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10">
</path></g><path d="M218 41h10">
</path><g>
<path d="M228 41h0">
</path><path d="M372 41h0">
</path><path d="M228 41h10">
</path><g>
<path d="M238 41h0">
</path><path d="M362 41h0">
</path><rect height=22 width=124 x=238 y=30>
</rect><text x=300 y=45>
media feature</text></g><path d="M362 41h10">
</path><path d="M238 41a10 10 0 0 0 -10 10v10a10 10 0 0 0 10 10">
</path><g>
<path d="M238 71h40">
</path><path d="M322 71h40">
</path><rect height=22 rx=10 ry=10 width=44 x=278 y=60>
</rect><text x=300 y=75>
and</text></g><path d="M362 71a10 10 0 0 0 10 -10v-10a10 10 0 0 0 -10 -10">
</path></g><path d="M372 41h10">
</path></g><path d="M456 41h20">
</path><path d="M40 41a10 10 0 0 1 10 10v69a10 10 0 0 0 10 10">
</path><g>
<path d="M60 130h0">
</path><path d="M456 130h0">
</path><g>
<path d="M60 130h0">
</path><path d="M152 130h0">
</path><path d="M60 130a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10">
</path><g>
<path d="M80 110h0">
</path><path d="M132 110h0">
</path><rect height=22 rx=10 ry=10 width=52 x=80 y=99>
</rect><text x=106 y=114>
only</text></g><path d="M132 110a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10">
</path><path d="M60 130h20">
</path><g>
<path d="M80 130h52">
</path></g><path d="M132 130h20">
</path><path d="M60 130a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10">
</path><g>
<path d="M80 150h4">
</path><path d="M128 150h4">
</path><rect height=22 rx=10 ry=10 width=44 x=84 y=139>
</rect><text x=106 y=154>
not</text></g><path d="M132 150a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10">
</path></g><path d="M152 130h10">
</path><g>
<path d="M162 130h0">
</path><path d="M262 130h0">
</path><rect height=22 width=100 x=162 y=119>
</rect><text x=212 y=134>
media type</text></g><path d="M262 130h10">
</path><g>
<path d="M272 130h0">
</path><path d="M456 130h0">
</path><path d="M272 130a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10">
</path><g>
<path d="M292 110h144">
</path></g><path d="M436 110a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10">
</path><path d="M272 130h20">
</path><g>
<path d="M292 130h0">
</path><path d="M436 130h0">
</path><path d="M292 130h10">
</path><g>
<path d="M302 130h0">
</path><path d="M426 130h0">
</path><rect height=22 width=124 x=302 y=119>
</rect><text x=364 y=134>
media feature</text></g><path d="M426 130h10">
</path><path d="M302 130a10 10 0 0 0 -10 10v10a10 10 0 0 0 10 10">
</path><g>
<path d="M302 160h40">
</path><path d="M386 160h40">
</path><rect height=22 rx=10 ry=10 width=44 x=342 y=149>
</rect><text x=364 y=164>
and</text></g><path d="M426 160a10 10 0 0 0 10 -10v-10a10 10 0 0 0 -10 -10">
</path></g><path d="M436 130h20">
</path></g></g><path d="M456 130a10 10 0 0 0 10 -10v-69a10 10 0 0 1 10 -10">
</path></g><path d="M 476 41 h 20 m -10 -10 v 20 m 10 -20 v 20">
</path></g></svg></div>
<p> A <a data-link-type=dfn href=#media-query title="media query">media query</a> is a logical expression that is either true or false.
A media query is true if:
<p> <ul>
<li>
the <a data-link-type=dfn href=#media-type title="media type">media type</a>,
if specified,
matches the media type of the device where the user agent is running, and
<li>
all specified <a data-link-type=dfn href=#media-feature title="media features">media features</a> are true.
</ul>
<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>
Here is a simple example written in HTML:
<pre>&lt;link rel="stylesheet" media="screen and (color)" href="example.css" /&gt;</pre>
<p> This example expresses that a certain style sheet
(<code>example.css</code>) applies to devices of a certain media type
(<a class=css data-link-type=maybe href=#valuedef-screen title=screen>screen</a>) with certain feature (it must be a color screen).
<p> Here is the same media query written in an @import-rule in CSS:
<pre>@import url(example.css) screen and (color);</pre> </div>
<p> User agents should re-evaluate <a data-link-type=dfn href=#media-query title="media queries">media queries</a> in response to changes in the user environment,
for example if the device is tiled from landscape to portrait orientation,
and change the behavior of any constructs dependent on those <a data-link-type=dfn href=#media-query title="media queries">media queries</a> accordingly.
<p> Unless otherwise specified, it is never necessary to apply a style sheet in order to evaluate expressions.
<p class=note> Note: CSS Device Adaptation <a data-biblio-type=informative data-link-type=biblio href=#css-device-adapt title=css-device-adapt>[CSS-DEVICE-ADAPT]</a>]
defines how <span class=css data-link-type=maybe title=@viewport>@viewport</span> rules interact with Media Queries.
<h3 class="heading settled heading" data-level=2.1 id=mq-list><span class=secno>2.1 </span><span class=content>
Combining Media Queries</span><a class=self-link href=#mq-list></a></h3>
<p> Several <a data-link-type=dfn href=#media-query title="media queries">media queries</a> can be combined into a comma-separated <dfn data-dfn-type=dfn data-export="" id=media-query-list>media query list<a class=self-link href=#media-query-list></a></dfn>.
<div class=railroad><svg class=railroad-diagram height=102 viewBox="0 0 249 102" width=249>
<g transform="translate(.5 .5)">
<path d="M 20 31 v 20 m 10 -20 v 20 m -10 -10 h 20.5">
</path><g>
<path d="M40 41h0">
</path><path d="M208 41h0">
</path><path d="M40 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10">
</path><g>
<path d="M60 21h128">
</path></g><path d="M188 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10">
</path><path d="M40 41h20">
</path><g>
<path d="M60 41h0">
</path><path d="M188 41h0">
</path><path d="M60 41h10">
</path><g>
<path d="M70 41h0">
</path><path d="M178 41h0">
</path><rect height=22 width=108 x=70 y=30>
</rect><text x=124 y=45>
media query</text></g><path d="M178 41h10">
</path><path d="M70 41a10 10 0 0 0 -10 10v10a10 10 0 0 0 10 10">
</path><g>
<path d="M70 71h40">
</path><path d="M138 71h40">
</path><rect height=22 rx=10 ry=10 width=28 x=110 y=60>
</rect><text x=124 y=75>
,</text></g><path d="M178 71a10 10 0 0 0 10 -10v-10a10 10 0 0 0 -10 -10">
</path></g><path d="M188 41h20">
</path></g><path d="M 208 41 h 20 m -10 -10 v 20 m 10 -20 v 20">
</path></g></svg></div>
<p> A <a data-link-type=dfn href=#media-query-list title="media query list">media query list</a> is true if <em>any</em> of its component <a data-link-type=dfn href=#media-query title="media queries">media queries</a> are true,
and false only if <em>all</em> of its component <a data-link-type=dfn href=#media-query title="media queries">media queries</a> are false.
<div class=example>
For example, the following <a data-link-type=dfn href=#media-query-list title="media query list">media query list</a> is true if either
the <a data-link-type=dfn href=#media-type title="media type">media type</a> is <a class=css data-link-type=maybe href=#valuedef-screen title=screen>screen</a> and it’s a color device,
<strong>or</strong> the <a data-link-type=dfn href=#media-type title="media type">media type</a> is <a class=css data-link-type=maybe href=#valuedef-projection title=projection>projection</a> and it’s a color device:
<pre>@media screen and (color), projection and (color) { … }
</pre> </div>
<p> An empty <a data-link-type=dfn href=#media-query-list title="media query list">media query list</a> evaluates to true.
<div class=example>
For example, these are equivalent:
<pre>@media all { … }
@media { … }
</pre> </div>
<h3 class="heading settled heading" data-level=2.2 id=mq-prefix><span class=secno>2.2 </span><span class=content>
Media Query Modifiers</span><a class=self-link href=#mq-prefix></a></h3>
<p> A <a data-link-type=dfn href=#media-query title="media query">media query</a> may optionally be prefixed by a single <dfn data-dfn-type=dfn data-export="" id=media-query-modifier>media query modifier<a class=self-link href=#media-query-modifier></a></dfn>,
which is a single keyword which alters the meaning of the following <a data-link-type=dfn href=#media-query title="media query">media query</a>.
<h4 class="heading settled heading" data-level=2.2.1 id=mq-not><span class=secno>2.2.1 </span><span class=content>
Negating a Media Query: the <a class=css data-link-type=maybe href=#valuedef-not title=not>not</a> keyword</span><a class=self-link href=#mq-not></a></h4>
<p> An individual <a data-link-type=dfn href=#media-query title="media query">media query</a> can have its result negated
by prefixing it with the keyword <dfn class=css-code data-dfn-for=@media data-dfn-type=value data-export="" id=valuedef-not>not<a class=self-link href=#valuedef-not></a></dfn>.
If the <a data-link-type=dfn href=#media-query title="media query">media query</a> would normally evaluate to true,
prefixing it with <a class=css data-link-type=maybe href=#valuedef-not title=not>not</a> makes it evaluate to false,
and vice versa.
<div class=example>
For example, the following will apply to everything except color-capable screens.
Note that the entire media query is negated,
not just the <a data-link-type=dfn href=#media-type title="media type">media type</a>.
<pre>&lt;link rel="stylesheet" media="not screen and (color)" href="example.css" /&gt;</pre> </div>
<h4 class="heading settled heading" data-level=2.2.2 id=mq-only><span class=secno>2.2.2 </span><span class=content>
Hiding a Media Query From Legacy User Agents: the <a class=css data-link-type=maybe href=#valuedef-only title=only>only</a> keyword</span><a class=self-link href=#mq-only></a></h4>
<p> The concept of <a data-link-type=dfn href=#media-query title="media queries">media queries</a> originates from HTML4 <a data-biblio-type=informative data-link-type=biblio href=#html401 title=html401>[HTML401]</a>.
That specification only defined <a data-link-type=dfn href=#media-type title="media types">media types</a>,
but had a forward-compatible syntax that accommodated the addition of future concepts like <a data-link-type=dfn href=#media-feature title="media features">media features</a>:
it would consume the characters of a <a data-link-type=dfn href=#media-query title="media query">media query</a> up to the first non-alphanumeric character,
and interpret that as a <a data-link-type=dfn href=#media-type title="media type">media type</a>,
ignoring the rest.
For example, the <a data-link-type=dfn href=#media-query title="media query">media query</a> <span class=css data-link-type=maybe title="screen and (color)">screen and (color)</span>
would be truncated to just <a class=css data-link-type=maybe href=#valuedef-screen title=screen>screen</a>.
<p> Unfortunately, this means that legacy user agents using this error-handling behavior
will ignore any <a data-link-type=dfn href=#media-feature title="media features">media features</a> in a <a data-link-type=dfn href=#media-query title="media query">media query</a>,
even if they’re far more important than the <a data-link-type=dfn href=#media-type title="media type">media type</a> in the query.
This can result in styles accidentally being applied in inappropriate situations.
<p> To hide these <a data-link-type=dfn href=#media-query title="media queries">media queries</a> from legacy user agents,
the <a data-link-type=dfn href=#media-query title="media query">media query</a> can be prefixed with the keyword <dfn class=css-code data-dfn-for=@media data-dfn-type=value data-export="" id=valuedef-only>only<a class=self-link href=#valuedef-only></a></dfn>.
The <a class=css data-link-type=maybe href=#valuedef-only title=only>only</a> keyword <strong>has no effect</strong> on the <a data-link-type=dfn href=#media-query title="media query">media query</a>’s result,
but will cause the <a data-link-type=dfn href=#media-query title="media query">media query</a> to be parsed by legacy user agents
as specifying the unknown <a data-link-type=dfn href=#media-type title="media type">media type</a> “only”,
and thus be ignored.
<div class=example>
In this example, the stylesheet specified by the <code>&lt;link&gt;</code> element
will not be used by legacy user agents,
even if they would normally match the <a class=css data-link-type=maybe href=#valuedef-screen title=screen>screen</a> <a data-link-type=dfn href=#media-type title="media type">media type</a>.
<pre>&lt;link rel="stylesheet" media="only screen and (color)" href="example.css" /&gt;</pre> </div>
<p class=note> Note: Note that the <a class=css data-link-type=maybe href=#valuedef-only title=only>only</a> keyword can only be used before a <a data-link-type=dfn href=#media-type title="media type">media type</a>.
A <a data-link-type=dfn href=#media-query title="media query">media query</a> consisting only of <a data-link-type=dfn href=#media-feature title="media features">media features</a>,
or one with another <a data-link-type=dfn href=#media-query-modifier title="media query modifier">media query modifier</a> like <a class=css data-link-type=maybe href=#valuedef-not title=not>not</a>,
will be treated as false by legacy user agents automatically.
<p class=note> Note: At the time of publishing this specification,
such legacy user agents are extremely rare,
and so using the <a class=css data-link-type=maybe href=#valuedef-only title=only>only</a> modifier is rarely, if ever, necessary.
<h3 class="heading settled heading" data-level=2.3 id=media-types><span class=secno>2.3 </span><span class=content>
Media Types</span><a class=self-link href=#media-types></a></h3>
<p> A <dfn data-dfn-type=dfn data-export="" id=media-type>media type<a class=self-link href=#media-type></a></dfn> is a broad category of user-agent devices
on which a document may be displayed.
The original set of <a data-link-type=dfn href=#media-type title="media types">media types</a> were defined in HTML4,
for the <code>media</code> attribute on <code>&lt;link&gt;</code> elements.
<p> Unfortunately, <a data-link-type=dfn href=#media-type title="media types">media types</a> have proven insufficient as a way of discriminating between devices with different styling needs.
Some categories which were originally quite distinct,
such as <a class=css data-link-type=maybe href=#valuedef-screen title=screen>screen</a> and <a class=css data-link-type=maybe href=#valuedef-handheld title=handheld>handheld</a>,
have blended significantly in the years since their invention.
Others, such as <a class=css data-link-type=maybe href=#valuedef-tty title=tty>tty</a> or <a class=css data-link-type=maybe href=#valuedef-tv title=tv>tv</a>,
expose useful differences from the norm of a full-featured computer monitor,
and so are potentially useful to target with different styling,
but the definition of <a data-link-type=dfn href=#media-type title="media types">media types</a> as mutually exclusive
makes it difficult to use them in a reasonable manner;
instead, their exclusive aspects are better expressed as <a data-link-type=dfn href=#media-feature title="media features">media features</a>
such as <a class=property data-link-type=propdesc href=#descdef-grid title=grid>grid</a> or <a class=property data-link-type=propdesc href=#descdef-scan title=scan>scan</a>.
<p> As such, the following <a data-link-type=dfn href=#media-type title="media types">media types</a> are defined for use in <a data-link-type=dfn href=#media-query title="media queries">media queries</a>:
<dl data-dfn-for=@media data-dfn-type=value>
<dt><dfn class=css-code data-dfn-for=@media data-dfn-type=value data-export="" id=valuedef-all>all<a class=self-link href=#valuedef-all></a></dfn>
<dd>Matches all devices.
<dt><dfn class=css-code data-dfn-for=@media data-dfn-type=value data-export="" id=valuedef-print>print<a class=self-link href=#valuedef-print></a></dfn>
<dd>Matches printers, and devices intended to reproduce a printed display,
such as a web browser showing a document in “Print Preview”.
<dt><dfn class=css-code data-dfn-for=@media data-dfn-type=value data-export="" id=valuedef-screen>screen<a class=self-link href=#valuedef-screen></a></dfn>
<dd>Matches all devices that aren’t matched by <a class=css data-link-type=maybe href=#valuedef-print title=print>print</a> or <a class=css data-link-type=maybe href=#valuedef-speech title=speech>speech</a>.
<dt><dfn class=css-code data-dfn-for=@media data-dfn-type=value data-export="" id=valuedef-speech>speech<a class=self-link href=#valuedef-speech></a></dfn>
<dd>Matches screenreaders and similar devices that “read out” a page.
</dl>
<p> In addition, the following <strong>deprecated</strong> <a data-link 2334 -type=dfn href=#media-type title="media types">media types</a> are defined.
Authors must not use these <a data-link-type=dfn href=#media-type title="media types">media types</a>;
instead, it is recommended that they select appropriate <a data-link-type=dfn href=#media-feature title="media features">media features</a>
that better represent the aspect of the device that they are attempting to style against.
<p> User agents must recognize the following <a data-link-type=dfn href=#media-type title="media types">media types</a> as valid,
but must make them match nothing.
<p> <ul data-dfn-for=@media data-dfn-type=value>
<li><dfn class=css-code data-dfn-for=@media data-dfn-type=value data-export="" id=valuedef-tty>tty<a class=self-link href=#valuedef-tty></a></dfn>
<li><dfn class=css-code data-dfn-for=@media data-dfn-type=value data-export="" id=valuedef-tv>tv<a class=self-link href=#valuedef-tv></a></dfn>
<li><dfn class=css-code data-dfn-for=@media data-dfn-type=value data-export="" id=valuedef-projection>projection<a class=self-link href=#valuedef-projection></a></dfn>
<li><dfn class=css-code data-dfn-for=@media data-dfn-type=value data-export="" id=valuedef-handheld>handheld<a class=self-link href=#valuedef-handheld></a></dfn>
<li><dfn class=css-code data-dfn-for=@media data-dfn-type=value data-export="" id=valuedef-braille>braille<a class=self-link href=#valuedef-braille></a></dfn>
<li><dfn class=css-code data-dfn-for=@media data-dfn-type=value data-export="" id=valuedef-embossed>embossed<a class=self-link href=#valuedef-embossed></a></dfn>
<li><dfn class=css-code data-dfn-for=@media data-dfn-type=value data-export="" id=valuedef-aural>aural<a class=self-link href=#valuedef-aural></a></dfn>
</ul>
<p class=note> Note: It is expected that all of the media types will also be deprecated in time,
as appropriate <a data-link-type=dfn href=#media-feature title="media features">media features</a> are defined which capture their important differences.
<h3 class="heading settled heading" data-level=2.4 id=mq-features><span class=secno>2.4 </span><span class=content>
Media Features</span><a class=self-link href=#mq-features></a></h3>
<p> A <dfn data-dfn-type=dfn data-export="" id=media-feature>media feature<a class=self-link href=#media-feature></a></dfn> is a more fine-grained test than <a data-link-type=dfn href=#media-type title="media types">media types</a>,
testing a single, specific feature of the user agent or display device.
<p> Syntactically, <a data-link-type=dfn href=#media-feature title="media features">media features</a> resemble CSS properties:
they consist of a feature name, a colon, and a value to test for.
They may also be written in boolean form as just a feature name,
or in range form with a comparison operator.
<div class=railroad><svg class=railroad-diagram height=122 viewBox="0 0 545 122" width=545>
<g transform="translate(.5 .5)">
<path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5">
</path><path d="M40 31h10">
</path><g>
<path d="M50 31h0">
</path><path d="M78 31h0">
</path><rect height=22 rx=10 ry=10 width=28 x=50 y=20>
</rect><text x=64 y=35>
(</text></g><path d="M78 31h10">
</path><g>
<path d="M88 31h0">
</path><path d="M456 31h0">
</path><path d="M88 31h20">
</path><g>
<path d="M108 31h0">
</path><path d="M436 31h0">
</path><path d="M108 31h10">
</path><g>
<path d="M118 31h0">
</path><path d="M234 31h0">
</path><rect height=22 width=116 x=118 y=20>
</rect><text x=176 y=35>
feature name</text></g><path d="M234 31h10">
</path><path d="M244 31h10">
</path><g>
<path d="M254 31h0">
</path><path d="M282 31h0">
</path><rect height=22 rx=10 ry=10 width=28 x=254 y=20>
</rect><text x=268 y=35>
:</text></g><path d="M282 31h10">
</path><path d="M292 31h10">
</path><g>
<path d="M302 31h0">
</path><path d="M426 31h0">
</path><rect height=22 width=124 x=302 y=20>
</rect><text x=364 y=35>
feature value</text></g><path d="M426 31h10">
</path></g><path d="M436 31h20">
</path><path d="M88 31a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10">
</path><g>
<path d="M108 61h106">
</path><path d="M330 61h106">
</path><rect height=22 width=116 x=214 y=50>
</rect><text x=272 y=65>
feature name</text></g><path d="M436 61a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10">
</path><path d="M88 31a10 10 0 0 1 10 10v40a10 10 0 0 0 10 10">
</path><g>
<path d="M108 91h50">
</path><path d="M385 91h50">
</path><path d="M158 91h10">
</path><g>
<path d="M168 91h0">
</path><path d="M268 91h0">
</path><rect height=22 width=100 x=168 y=80>
</rect><text x=218 y=95>
range form</text></g><path d="M268 91h10">
</path><path d="M278 91h10">
</path><g>
<path d="M288 91h0">
</path><path d="M375 91h0">
</path><text class=comment x=331 y=96>
(see below)</text></g><path d="M375 91h10">
</path></g><path d="M436 91a10 10 0 0 0 10 -10v-40a10 10 0 0 1 10 -10">
</path></g><path d="M456 31h10">
</path><g>
<path d="M466 31h0">
</path><path d="M494 31h0">
</path><rect height=22 rx=10 ry=10 width=28 x=466 y=20>
</rect><text x=480 y=35>
)</text></g><path d="M494 31h10">
</path><path d="M 504 31 h 20 m -10 -10 v 20 m 10 -20 v 20">
</path></g></svg></div>
<p> There are, however, several important differences between properties and media features:
<p> <ul>
<li>
Properties are used to give information about how to present a document.
Media features are used to describe requirements of the output device.
<li>
Media features are always wrapped in parentheses
and combined with the <span class=css data-link-type=maybe title=and>and</span> keyword,
like <span class=css data-link-type=maybe title="(color) and (min-width: 600px)">(color) and (min-width: 600px)</span>,
rather than being separated with semicolons.
<li>
A media feature may be given with <em>only</em> its name
(omitting the colon and value)
to evaluate the feature in a <a data-link-type=dfn href=#boolean-context title="boolean context">boolean context</a>.
This is a convenient shorthand for features that have a reasonable value representing 0 or “none”.
For example, <span class=css data-link-type=maybe title=(color)>(color)</span> is true is the <a class=property data-link-type=propdesc href=#descdef-color title=color>color</a> <a data-link-type=dfn href=#media-feature title="media feature">media feature</a> is non-zero.
<li>
<a data-link-type=dfn href=#media-feature title="media features">Media features</a> with “range” type can be written in a <a data-link-type=dfn href=#range-context title="range context">range context</a>,
which uses standard mathematical comparison operators rather than a colon,
or have their feature names <a href=#mq-min-max>prefixed with “min-” or “max-”</a>.
<li>
Properties sometimes accept complex values,
e.g., calculations that involve several other values.
<a data-link-type=dfn href=#media-feature title="media features">Media features</a> only accept single values: one keyword, one number, etc.
</ul>
<p> If a media feature does not apply to the device where the UA is running,
that <a data-link-type=dfn href=#media-feature title="media feature">media feature</a> will always be false.
<div class=example>
The media feature <span class=css data-link-type=maybe title=device-aspect-ratio>device-aspect-ratio</span> only applies to
visual devices. On an <a class=css data-link-type=maybe href=#valuedef-speech title=speech>speech</a> device, expressions involving
<span class=css data-link-type=maybe title=device-aspect-ratio>device-aspect-ratio</span> will therefore always be false:
<pre> &lt;link media="speech and (device-aspect-ratio: 16/9)"
rel="stylesheet" href="example.css"&gt;
</pre> </div>
<h4 class="heading settled heading" data-level=2.4.1 id=mq-ranges><span class=secno>2.4.1 </span><span class=content>
Media Feature Types: “range” and “discrete”</span><a class=self-link href=#mq-ranges></a></h4>
<p> Every media feature defines its “type” as either “range” or “discrete” in its definition table.
<p> “Discrete” media features,
like <a class=property data-link-type=propdesc href=#descdef-light-level title=light-level>light-level</a> or <a class=property data-link-type=propdesc href=#descdef-scripting title=scripting>scripting</a>,
take their values from a set.
The values may be keywords
or boolean numbers (0 and 1),
but the common factor is that there’s no intrinsic “order” to them—<wbr>none of the values are “less than” or “greater than” each other.
<p> “Range” media features like <a class=property data-link-type=propdesc href=#descdef-width title=width>width</a>, on the other hand,
take their values from a range.
Any two values can be compared to see which is lesser and which is greater.
<p> The only significant difference between the two types is that “range” <a data-link-type=dfn href=#media-feature title="media features">media features</a>
can be evaluated in a <a data-link-type=dfn href=#range-context title="range context">range context</a>
and accept “min-” and “max-” prefixes on their name.
Doing either of these changes the meaning of the feature—<wbr>rather than the <a data-link-type=dfn href=#media-feature title="media feature">media feature</a> being true when the feature exactly matches the given value,
it matches when the feature is greater than/less than/equal to the given value.
<div class=example>
A <span class=css data-link-type=maybe title="(width >= 600px)">(width &gt;= 600px)</span> <a data-link-type=dfn href=#media-feature title="media feature">media feature</a> is true
when the viewport’s width is <span class=css data-link-type=maybe title=600px>600px</span> <em>or more</em>.
<p> On the other hand, <span class=css data-link-type=maybe title="(width: 600px)">(width: 600px)</span> by itself is only true
when the viewport’s width is <em>exactly</em> <span class=css data-link-type=maybe title=600px>600px</span>.
If it’s less or greater than <span class=css data-link-type=maybe title=600px>600px</span>, it’ll be false.
</div>
<h4 class="heading settled heading" data-level=2.4.2 id=mq-boolean-context><span class=secno>2.4.2 </span><span class=content>
Evaluating Media Features in a Boolean Context</span><a class=self-link href=#mq-boolean-context></a></h4>
<p> While <a data-link-type=dfn href=#media-feature title="media features">media features</a> normally have a syntax similar to CSS properties,
they can also be written more simply as just the feature name,
like <span class=css data-link-type=maybe title=(color)>(color)</span>.
<p> When written like this, the <a data-link-type=dfn href=#media-feature title="media feature">media feature</a> is evaluated in a <dfn data-dfn-type=dfn data-export="" id=boolean-context>boolean context<a class=self-link href=#boolean-context></a></dfn>.
If the feature would be true for the number <span class=css data-link-type=maybe title=0>0</span>,
a dimension with the value <span class=css data-link-type=maybe title=0>0</span>,
or the keyword <a class=css data-link-type=maybe href=#valuedef-none0 title=none>none</a>,
the <a data-link-type=dfn href=#media-feature title="media feature">media feature</a> evaluates to false.
If it would be true for any values <strong>other than</strong> the above,
it evaluates to true.
Otherwise, it evaluates to false.
<p class=note> Note: The “trichotomy” above allows for correct handling of MQs as false when on devices where they don’t apply at all,
such as <a class=property data-link-type=propdesc href=#descdef-scan title=scan>scan</a> on a speech device.
<div class=example>
Some <a data-link-type=dfn href=#media-feature title="media features">media features</a> are designed to be written like this.
<p> For example, <a class=property data-link-type=propdesc href=#descdef-scripting title=scripting>scripting</a> is typically written as <span class=css data-link-type=maybe title=(scripting)>(scripting)</span> to test if scripting is enabled,
or <span class=css data-link-type=maybe title="not (scripting)">not (scripting)</span> to see if it’s disabled.
<p> It can still be given an explicit value as well,
with <span class=css data-link-type=maybe title="(scripting: enabled)">(scripting: enabled)</span> equal to <span class=css data-link-type=maybe title=(scripting)>(scripting)</span>,
and <span class=css data-link-type=maybe title="(scripting: none)">(scripting: none)</span> equal to <span class=css data-link-type=maybe title="not (scripting)">not (scripting)</span>.
</div>
<div class=example>
Some numeric <a data-link-type=dfn href=#media-feature title="media features">media features</a>, like <a class=property data-link-type=propdesc href=#descdef-width title=width>width</a>,
are rarely if ever useful to evaluate in a <a data-link-type=dfn href=#boolean-context title="boolean context">boolean context</a>,
as their values are almost always greater than zero.
Others, like <a class=property data-link-type=propdesc href=#descdef-color title=color>color</a>, have meaningful zero values:
<span class=css data-link-type=maybe title=(color)>(color)</span> is identical to <span class=css data-link-type=maybe title="(color > 0)">(color &gt; 0)</span>,
indicating that the device is capable of displaying color at all.
</div>
<div class=example>
Only some of the <a data-link-type=dfn href=#media-feature title="media features">media features</a> that accept keywords are meaningful in a <a data-link-type=dfn href=#boolean-context title="boolean context">boolean context</a>.
<p> For example, <span class=css data-link-type=maybe title=(pointer)>(pointer)</span> is useful,
as <a class=property data-link-type=propdesc href=#descdef-pointer title=pointer>pointer</a> has a <a class=css data-link-for=pointer data-link-type=maybe href=#valuedef-none3 title=none>none</a> value to indicate there’s no pointing device at all on the device.
On the other hand, <span class=css data-link-type=maybe title=(scan)>(scan)</span> is just always true or always false
(depending on whether it applies at all to the device),
as there’s no value that means “false”.
</div>
<h4 class="heading settled heading" data-level=2.4.3 id=mq-range-context><span class=secno>2.4.3 </span><span class=content>
Evaluating Media Features in a Range Context</span><a class=self-link href=#mq-range-context></a></h4>
<p> <a data-link-type=dfn href=#media-feature title="media features">Media features</a> with a “range” type can be alternately written in a <dfn data-dfn-type=dfn data-export="" id=range-context>range context<a class=self-link href=#range-context></a></dfn>
that takes advantage of the fact that their values are ordered,
using ordinary mathematical comparison operators:
<div class=railroad><svg class=railroad-diagram height=302 viewBox="0 0 665 302" width=665>
<g transform="translate(.5 .5)">
<path d="M 20 141 v 20 m 10 -20 v 20 m -10 -10 h 20.5">
</path><path d="M40 151h10">
</path><g>
<path d="M50 151h0">
</path><path d="M78 151h0">
</path><rect height=22 rx=10 ry=10 width=28 x=50 y=140>
</rect><text x=64 y=155>
(</text></g><path d="M78 151h10">
</path><g>
<path d="M88 151h0">
</path><path d="M576 151h0">
</path><path d="M88 151h20">
</path><g>
<path d="M108 151h2">
</path><path d="M554 151h2">
</path><path d="M110 151h10">
</path><g>
<path d="M120 151h0">
</path><path d="M284 151h0">
</path><rect height=22 width=164 x=120 y=140>
</rect><text x=202 y=155>
feature name/value</text></g><path d="M284 151h10">
</path><g>
<path d="M294 151h0">
</path><path d="M370 151h0">
</path><path d="M294 151a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10">
</path><g>
<path d="M314 121h4">
</path><path d="M346 121h4">
</path><rect height=22 rx=10 ry=10 width=28 x=318 y=110>
</rect><text x=332 y=125>
&gt;</text></g><path d="M350 121a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10">
</path><path d="M294 151a10 10 0 0 0 10 -10v-40a10 10 0 0 1 10 -10">
</path><g>
<path d="M314 91h0">
</path><path d="M350 91h0">
</path><rect height=22 rx=10 ry=10 width=36 x=314 y=80>
</rect><text x=332 y=95>
&lt;=</text></g><path d="M350 91a10 10 0 0 1 10 10v40a10 10 0 0 0 10 10">
</path><path d="M294 151a10 10 0 0 0 10 -10v-70a10 10 0 0 1 10 -10">
</path><g>
<path d="M314 61h4">
</path><path d="M346 61h4">
</path><rect height=22 rx=10 ry=10 width=28 x=318 y=50>
</rect><text x=332 y=65>
&lt;</text></g><path d="M350 61a10 10 0 0 1 10 10v70a10 10 0 0 0 10 10">
</path><path d="M294 151a10 10 0 0 0 10 -10v-100a10 10 0 0 1 10 -10">
</path><g>
<path d="M314 31h4">
</path><path d="M346 31h4">
</path><rect height=22 rx=10 ry=10 width=28 x=318 y=20>
</rect><text x=332 y=35>
=</text></g><path d="M350 31a10 10 0 0 1 10 10v100a10 10 0 0 0 10 10">
</path><path d="M294 151h20">
</path><g>
<path d="M314 151h0">
</path><path d="M350 151h0">
</path><rect height=22 rx=10 ry=10 width=36 x=314 y=140>
</rect><text x=332 y=155>
&gt;=</text></g><path d="M350 151h20">
</path></g><path d="M370 151h10">
</path><g>
<path d="M380 151h0">
</path><path d="M544 151h0">
</path><rect height=22 width=164 x=380 y=140>
</rect><text x=462 y=155>
feature value/name</text></g><path d="M544 151h10">
</path></g><path d="M556 151h20">
</path><path d="M88 151a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10">
</path><g>
<path d="M108 181h0">
</path><path d="M556 181h0">
</path><path d="M108 181h10">
</path><g>
<path d="M118 181h0">
</path><path d="M178 181h0">
</path><rect height=22 width=60 x=118 y=170>
</rect><text x=148 y=185>
value</text></g><path d="M178 181h10">
</path><g>
<path d="M188 181h0">
</path><path d="M264 181h0">
</path><path d="M188 181h20">
</path><g>
<path d="M208 181h4">
</path><path d="M240 181h4">
</path><rect height=22 rx=10 ry=10 width=28 x=212 y=170>
</rect><text x=226 y=185>
&lt;</text></g><path d="M244 181h20">
</path><path d="M188 181a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10">
</path><g>
<path d="M208 211h0">
</path><path d="M244 211h0">
</path><rect height=22 rx=10 ry=10 width=36 x=208 y=200>
</rect><text x=226 y=215>
&lt;=</text></g><path d="M244 211a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10">
</path></g><path d="M264 181h10">
</path><g>
<path d="M274 181h0">
</path><path d="M390 181h0">
</path><rect height=22 width=116 x=274 y=170>
</rect><text x=332 y=185>
feature name</text></g><path d="M390 181h10">
</path><g>
<path d="M400 181h0"&g 6EFC t;
</path><path d="M476 181h0">
</path><path d="M400 181h20">
</path><g>
<path d="M420 181h4">
</path><path d="M452 181h4">
</path><rect height=22 rx=10 ry=10 width=28 x=424 y=170>
</rect><text x=438 y=185>
&lt;</text></g><path d="M456 181h20">
</path><path d="M400 181a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10">
</path><g>
<path d="M420 211h0">
</path><path d="M456 211h0">
</path><rect height=22 rx=10 ry=10 width=36 x=420 y=200>
</rect><text x=438 y=215>
&lt;=</text></g><path d="M456 211a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10">
</path></g><path d="M476 181h10">
</path><g>
<path d="M486 181h0">
</path><path d="M546 181h0">
</path><rect height=22 width=60 x=486 y=170>
</rect><text x=516 y=185>
value</text></g><path d="M546 181h10">
</path></g><path d="M556 181a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10">
</path><path d="M88 151a10 10 0 0 1 10 10v70a10 10 0 0 0 10 10">
</path><g>
<path d="M108 241h0">
</path><path d="M556 241h0">
</path><path d="M108 241h10">
</path><g>
<path d="M118 241h0">
</path><path d="M178 241h0">
</path><rect height=22 width=60 x=118 y=230>
</rect><text x=148 y=245>
value</text></g><path d="M178 241h10">
</path><g>
<path d="M188 241h0">
</path><path d="M264 241h0">
</path><path d="M188 241h20">
</path><g>
<path d="M208 241h4">
</path><path d="M240 241h4">
</path><rect height=22 rx=10 ry=10 width=28 x=212 y=230>
</rect><text x=226 y=245>
&gt;</text></g><path d="M244 241h20">
</path><path d="M188 241a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10">
</path><g>
<path d="M208 271h0">
</path><path d="M244 271h0">
</path><rect height=22 rx=10 ry=10 width=36 x=208 y=260>
</rect><text x=226 y=275>
&gt;=</text></g><path d="M244 271a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10">
</path></g><path d="M264 241h10">
</path><g>
<path d="M274 241h0">
</path><path d="M390 241h0">
</path><rect height=22 width=116 x=274 y=230>
</rect><text x=332 y=245>
feature name</text></g><path d="M390 241h10">
</path><g>
<path d="M400 241h0">
View remainder of file in raw view