CINXE.COM

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Media Queries Level 5</title> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <meta content="exploring" name="csswg-work-status"> <meta content="ED" name="w3c-status"> <meta content="<a>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." name="abstract"> <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; } </style> <meta content="Bikeshed version 576ef4f5126e3fb83bf07d9bbe1a64f99aa4944e" name="generator"> <link href="https://www.w3.org/TR/mediaqueries-5/" rel="canonical"> <style>/* style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; }</style> <style>/* style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; }</style> <style>/* style-dfn-panel */ .dfn-panel { position: absolute; z-index: 35; height: auto; width: -webkit-fit-content; width: fit-content; max-width: 300px; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: #DDDDDD; color: black; border: outset 0.2em; } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: black; } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0; } .dfn-panel li { list-style: inside; } .dfn-panel.activated { display: inline-block; position: fixed; left: .5em; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; } .dfn-paneled { cursor: pointer; } </style> <style>/* style-selflinks */ .heading, .issue, .note, .example, li, dt { position: relative; } a.self-link { position: absolute; top: 0; left: calc(-1 * (3.5rem - 26px)); width: calc(3.5rem - 26px); height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; } a.self-link:hover { opacity: 1; } .heading > a.self-link { font-size: 83%; } li > a.self-link { left: calc(-1 * (3.5rem - 26px) - 2em); } dfn > a.self-link { top: auto; left: auto; opacity: 0; width: 1.5em; height: 1.5em; background: gray; color: white; font-style: normal; transition: opacity .2s, background-color .2s, color .2s; } dfn:hover > a.self-link { opacity: 1; } dfn > a.self-link:hover { color: black; } a.self-link::before { content: "¶"; } .heading > a.self-link::before { content: "§"; } dfn > a.self-link::before { content: "#"; }</style> <style>/* style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: #005a9c; font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; }</style> <style type='text/css'></style><body class="h-entry"> <div class="head"> <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p> <h1 class="p-name no-ref" id="title">Media Queries Level 5</h1> <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2020-03-18">18 March 2020</time></span></h2> <details> <summary>Specification Metadata</summary> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://drafts.csswg.org/mediaqueries-5/">https://drafts.csswg.org/mediaqueries-5/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/mediaqueries-5/">https://www.w3.org/TR/mediaqueries-5/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2020/WD-mediaqueries-5-20200318/" rel="prev">https://www.w3.org/TR/2020/WD-mediaqueries-5-20200318/</a> <dd><a href="https://www.w3.org/TR/2020/WD-mediaqueries-5-20200303/" rel="prev">https://www.w3.org/TR/2020/WD-mediaqueries-5-20200303/</a> <dt>Issue Tracking: <dd><a href="#issues-index">Inline In Spec</a> <dd><a href="https://github.com/w3c/csswg-drafts/labels/mediaqueries-5">GitHub Issues</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="42080"><span class="p-name fn">Dean Jackson</span> (<span class="p-org org">Apple</span>) <dd class="editor p-author h-card vcard" data-editor-id="43241"><a class="p-name fn u-url url" href="https://florian.rivoal.net">Florian Rivoal</a> (<span class="p-org org">Invited Expert</span>) <dd class="editor p-author h-card vcard" data-editor-id="42199"><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>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/mediaqueries-5/Overview.bs">GitHub Editor</a> <dt>Delta Spec: <dd>yes </dl> </div> </details> <div data-fill-with="warning"></div> <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2020 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p> <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2> <p><a data-link-type="dfn" href="https://drafts.csswg.org/mediaqueries-4/#media-query" id="ref-for-media-query">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> <a href="https://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, etc. </div> <h2 class="no-num no-toc no-ref heading settled" 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> <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification. When filing an issue, please put the text “mediaqueries” in the title, preferably like this: “[mediaqueries] <i data-lt>…summary of comment…</i>”. All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>, and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p> <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p> <p> This document was produced by a group operating under the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>. W3C maintains a <a href="https://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="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p> <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p> <p></p> <p>Once complete, this specification will include and extend <cite>Media Queries Level 4.</cite> <a data-link-type="biblio" href="#biblio-mediaqueries-4">[MEDIAQUERIES-4]</a></p> </div> <div data-fill-with="at-risk"></div> <nav data-fill-with="table-of-contents" id="toc"> <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> <ol class="toc" role="directory"> <li> <a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a> <ol class="toc"> <li> <a href="#mq-features"><span class="secno">1.1</span> <span class="content"> Media Features</span></a> <ol class="toc"> <li><a href="#mq-boolean-context"><span class="secno">1.1.1</span> <span class="content"> Evaluating Media Features in a Boolean Context</span></a> </ol> </ol> <li> <a href="#mf-environment"><span class="secno">2</span> <span class="content"> Environment Media Features</span></a> <ol class="toc"> <li><a href="#light-level"><span class="secno">2.1</span> <span class="content"> Detecting the ambient light level: the <span class="property">light-level</span> feature</span></a> <li><a href="#environment-blending"><span class="secno">2.2</span> <span class="content"> Detecting the display technology: the <span class="property">environment-blending</span> feature</span></a> </ol> <li> <a href="#mf-scripting"><span class="secno">3</span> <span class="content"> Scripting Media Features</span></a> <ol class="toc"> <li><a href="#scripting"><span class="secno">3.1</span> <span class="content"> Scripting Support: the <span class="property">scripting</span> feature</span></a> </ol> <li> <a href="#custom-mq"><span class="secno">4</span> <span class="content"> Custom Media Queries</span></a> <ol class="toc"> <li><a href="#script-custom-mq"><span class="secno">4.1</span> <span class="content"> Script-based Custom Media Queries</span></a> </ol> <li> <a href="#mf-user-preferences"><span class="secno">5</span> <span class="content"> User Preference Media Features</span></a> <ol class="toc"> <li><a href="#inverted"><span class="secno">5.1</span> <span class="content"> Detecting the desire for inverted colors on the display: the <span class="property">inverted-colors</span> feature</span></a> <li><a href="#prefers-reduced-motion"><span class="secno">5.2</span> <span class="content"> Detecting the desire for less motion on the page: the <span class="property">prefers-reduced-motion</span> feature</span></a> <li><a href="#prefers-reduced-transparency"><span class="secno">5.3</span> <span class="content"> Detecting the desire for reduced transparency on the page: the <span class="property">prefers-reduced-transparency</span> feature</span></a> <li><a href="#prefers-contrast"><span class="secno">5.4</span> <span class="content"> Detecting the desire for increased or decreased color contrast from elements on the page: the <span class="property">prefers-contrast</span> feature</span></a> <li><a href="#prefers-color-scheme"><span class="secno">5.5</span> <span class="content"> Detecting the desire for light or dark color schemes: the <span class="property">prefers-color-scheme</span> feature</span></a> <li><a href="#forced-colors"><span class="secno">5.6</span> <span class="content"> Detecting a forced color palette: the <span class="property">forced-colors</span> feature</span></a> <li><a href="#prefers-reduced-data"><span class="secno">5.7</span> <span class="content"> Detecting the desire for reduced data usage when loading a page: the <span class="property">prefers-reduced-data</span> feature</span></a> </ol> <li> <a href="#changes"><span class="secno"></span> <span class="content"> Changes</span></a> <ol class="toc"> <li><a href="#changes-level-5"><span class="secno"></span> <span class="content"> Changes Since the Media Queries Level 4</span></a> </ol> <li><a href="#acknowledgments"><span class="secno"></span> <span class="content"> Acknowledgments</span></a> <li> <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a> <ol class="toc"> <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a> <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a> <li> <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a> <ol class="toc"> <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a> <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a> <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a> </ol> </ol> <li> <a href="#index"><span class="secno"></span> <span class="content">Index</span></a> <ol class="toc"> <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a> <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a> </ol> <li> <a href="#references"><span class="secno"></span> <span class="content">References</span></a> <ol class="toc"> <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a> </ol> <li> <a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a> <ol class="toc"> <li><a href="#media-descriptor-table"><span class="secno"></span> <span class="content"><span>@media</span> Descriptors</span></a> </ol> <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2> <p class="note" role="note"><span>Note:</span> At the time of writing, <a data-link-type="biblio" href="#biblio-mediaqueries-4">[MEDIAQUERIES-4]</a> is not completely finalized yet. To avoid accidental divergences and maintenance overhead, This specification is written as a delta specification over Media Queries Level 4. Once the level 4 specification is final, its content will be integrated into this specification, which will then replace it. Until then, Media Queries Level 5 only contains additions and extensions to level 4.</p> <h3 class="heading settled" data-level="1.1" id="mq-features"><span class="secno">1.1. </span><span class="content"> Media Features</span><a class="self-link" href="#mq-features"></a></h3> <p class="issue" id="issue-4f3512b7"><a class="self-link" href="#issue-4f3512b7"></a> Copy level 4 prose when final</p> <h4 class="heading settled" data-level="1.1.1" id="mq-boolean-context"><span class="secno">1.1.1. </span><span class="content"> Evaluating Media Features in a Boolean Context</span><a class="self-link" href="#mq-boolean-context"></a></h4> <p class="issue" id="issue-2edbae7d"><a class="self-link" href="#issue-2edbae7d"></a> Copy level 4 prose when final, except the following paragraph which is changed compared to level 4.</p> <p>When written like this, the <a data-link-type="dfn" href="https://drafts.csswg.org/mediaqueries-4/#media-feature" id="ref-for-media-feature">media feature</a> is evaluated in a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="boolean-context">boolean context</dfn>. If the feature would be true for any value <em>other than</em> the number <span class="css">0</span>, a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-dimension" id="ref-for-typedef-dimension"><dimension></a> with the value <span class="css">0</span>, the keyword <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/mediaqueries-4/#valdef-media-update-none" id="ref-for-valdef-media-update-none">none</a>, or a value explicitly defined by that media feature to evaluate as false in a boolean context, the <span id="ref-for-media-feature①">media feature</span> evaluates to true. Otherwise, it evaluates to false.</p> <h2 class="heading settled" data-level="2" id="mf-environment"><span class="secno">2. </span><span class="content"> Environment Media Features</span><a class="self-link" href="#mf-environment"></a></h2> <h3 class="heading settled" data-level="2.1" id="light-level"><span class="secno">2.1. </span><span class="content"> Detecting the ambient light level: the <a class="property" data-link-type="propdesc" href="#descdef-media-light-level" id="ref-for-descdef-media-light-level">light-level</a> feature</span><a class="self-link" href="#light-level"></a></h3> <table class="def descdef mq"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-for="@media" data-dfn-type="descriptor" data-export id="descdef-media-light-level">light-level</dfn> <tr> <th>For: <td><a class="css" data-link-type="at-rule" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media">@media</a> <tr> <th>Value: <td class="prod">dim <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> normal <span id="ref-for-comb-one①">|</span> washed <tr> <th>Type: <td>discrete </table> <p>The <a class="property" data-link-type="propdesc" href="#descdef-media-light-level" id="ref-for-descdef-media-light-level①">light-level</a> media feature is used to query about the ambient light-level in which the device is used, to allow the author to adjust style of the document in response. The following values are valid:</p> <dl> <dt><dfn class="css" data-dfn-for="@media/light-level" data-dfn-type="value" data-export id="valdef-media-light-level-dim">dim<a class="self-link" href="#valdef-media-light-level-dim"></a></dfn> <dd> The device is used in a dim environment, where excessive contrast and brightness would be distracting or uncomfortable to the reader. For example: night time, or a dimly illuminated indoor environment. <dt><dfn class="css" data-dfn-for="@media/light-level" data-dfn-type="value" data-export id="valdef-media-light-level-normal">normal<a class="self-link" href="#valdef-media-light-level-normal"></a></dfn> <dd> The device is used in a environment with a light level in the ideal range for the screen, and which does not necessitate any particular adjustment. <dt><dfn class="css" data-dfn-for="@media/light-level" data-dfn-type="value" data-export id="valdef-media-light-level-washed">washed<a class="self-link" href="#valdef-media-light-level-washed"></a></dfn> <dd> The device is used in an exceptionally bright environment, causing the screen to be washed out and difficult to read. For example: bright daylight. </dl> <p>User agents should set the thresholds between the three levels in a way that takes into account the characteristics of the device.</p> <div class="note" role="note"> Even though it is expected that User Agents will adjust the value of this media feature based on ambient light sensors, this specification intentionally refrains from defining the three levels in terms of a measurement in lux, for several reasons: <ul> <li> Devices equipped with a light sensor usually adjust the brightness of the screen automatically. Depending on the level of adjustment, the thresholds for needing a low contrast or hight contrast content may vary. <li> Different screen technologies wash out at very different ambient light levels; e-ink displays remain readable in bright daylight, while liquid crystal displays do not. <li> Many embedded light sensors are inaccurately calibrated, making it difficult to establish useful thresholds valid across devices. </ul> </div> <p>For accessibility purposes, user agents may offer manual controls allowing the user to switch between the three levels of independently of the ambient light level, as high contrast or low contrast styles may be more suitable for users with visual disabilities.</p> <p class="issue" id="issue-86dff265"><a class="self-link" href="#issue-86dff265"></a> Using this media feature for accessibility purposes overlaps a lot with <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx">the high-contrast media feature proposed by Microsoft</a>. Can we adjust this so that it covers all use cases for both, or somehow modify them to work in an orthogonal, rather than overlapping, fashion? </p> <div class="example" id="example-0ffd3e6a"> <a class="self-link" href="#example-0ffd3e6a"></a> <pre>@media (light-level: normal) { p { background: url("texture.jpg"); color: #333 } } @media (light-level: dim) { p { background: #222; color: #ccc } } @media (light-level: washed) { p { background: white; color: black; font-size: 2em; } } </pre> </div> <h3 class="heading settled" data-level="2.2" id="environment-blending"><span class="secno">2.2. </span><span class="content"> Detecting the display technology: the <a class="property" data-link-type="propdesc" href="#descdef-media-environment-blending" id="ref-for-descdef-media-environment-blending">environment-blending</a> feature</span><a class="self-link" href="#environment-blending"></a></h3> <table class="def descdef mq"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-for="@media" data-dfn-type="descriptor" data-export id="descdef-media-environment-blending">environment-blending</dfn> <tr> <th>For: <td><a class="css" data-link-type="at-rule" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media①">@media</a> <tr> <th>Value: <td class="prod">opaque <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> additive <span id="ref-for-comb-one③">|</span> subtractive <tr> <th>Type: <td>discrete </table> <p>The <a class="property" data-link-type="propdesc" href="#descdef-media-environment-blending" id="ref-for-descdef-media-environment-blending①">environment-blending</a> media feature is used to query the characteristics of the user’s display so the author can adjust the style of the document. An author might choose to adjust the visuals and/or layout of the page depending on the display technology to increase the appeal or improve legibility.</p> <p>The following values are valid:</p> <dl> <dt><dfn class="css" data-dfn-for="@media/environment-blending" data-dfn-type="value" data-export id="valdef-media-environment-blending-opaque">opaque<a class="self-link" href="#valdef-media-environment-blending-opaque"></a></dfn> <dd> The document is rendered on an opaque medium, such as a traditional monitor or paper. Black is dark and white is 100% light. <dt><dfn class="css" data-dfn-for="@media/environment-blending" data-dfn-type="value" data-export id="valdef-media-environment-blending-additive">additive<a class="self-link" href="#valdef-media-environment-blending-additive"></a></dfn> <dd> The display blends the colors of the canvas with the real world using additive mixing. Black is fully transparent and white is 100% light. <p>For example: a head-up display in a car.</p> <dt><dfn class="dfn-paneled css" data-dfn-for="@media/environment-blending" data-dfn-type="value" data-export id="valdef-media-environment-blending-subtractive">subtractive</dfn> <dd> The display blends the colors of the canvas with the real world using subtractive mixing. White is fully transparent and dark colors have the most contrast. <p>For example: an LCD display embedded in a bathroom mirror.</p> </dl> <p class="issue" id="issue-c4eeab17"><a class="self-link" href="#issue-c4eeab17"></a> Is there a need for the <a class="css" data-link-type="maybe" href="#valdef-media-environment-blending-subtractive" id="ref-for-valdef-media-environment-blending-subtractive">subtractive</a> value?</p> <div class="example" id="example-2182c0e2"> <a class="self-link" href="#example-2182c0e2"></a> <pre>body { background-color: white; } p { color: black; } @media(environment-blending: additive) { body { background-color: black; } p { color: white; font-size: 16px; font-weight: 1000; } } </pre> </div> <h2 class="heading settled" data-level="3" id="mf-scripting"><span class="secno">3. </span><span class="content"> Scripting Media Features</span><a class="self-link" href="#mf-scripting"></a></h2> <h3 class="heading settled" data-level="3.1" id="scripting"><span class="secno">3.1. </span><span class="content"> Scripting Support: the <a class="property" data-link-type="propdesc" href="#descdef-media-scripting" id="ref-for-descdef-media-scripting">scripting</a> feature</span><a class="self-link" href="#scripting"></a></h3> <table class="def descdef mq"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-for="@media" data-dfn-type="descriptor" data-export id="descdef-media-scripting">scripting</dfn> <tr> <th>For: <td><a class="css" data-link-type="at-rule" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media②">@media</a> <tr> <th>Value: <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> initial-only <span id="ref-for-comb-one⑤">|</span> enabled <tr> <th>Type: <td>discrete </table> <p>The <a class="property" data-link-type="propdesc" href="#descdef-media-scripting" id="ref-for-descdef-media-scripting①">scripting</a> media feature is used to query whether scripting languages, such as JavaScript, are supported on the current document.</p> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="@media/scripting" data-dfn-type="value" data-export id="valdef-media-scripting-enabled">enabled</dfn> <dd> Indicates that the user agent supports scripting of the page, and that scripting in the current document is enabled for the lifetime of the document. <dt><dfn class="dfn-paneled css" data-dfn-for="@media/scripting" data-dfn-type="value" data-export id="valdef-media-scripting-initial-only">initial-only</dfn> <dd> Indicates that the user agent supports scripting of the page, and that scripting in the current document is enabled during the initial page load, but is not supported afterwards. Examples are printed pages, or pre-rendering network proxies that render a page on a server and send a nearly-static version of the page to the user. <p class="issue" id="issue-168bd904"><a class="self-link" href="#issue-168bd904"></a> Should there be an explicit minimum threshold to meet before a UA is allowed to claim <a class="css" data-link-type="maybe" href="#valdef-media-scripting-initial-only" id="ref-for-valdef-media-scripting-initial-only">initial-only</a>? Having one would mean authors would know what they can depend on, and could tailor their scripts accordingly. On the other hand, pinpointing that threshold is difficult: if it is set too low, the scripting facilities that authors can depend on may be to constrained to be practical, even though actual UAs may potentially all support significantly more. But trying to set it higher may cause us to exclude UAs that do support scripting at loading time, but restrict it in some cases based on complex heuristics. For instance, conservative definitions likely include at least running all inline scripts and firing the DOMContentLoaded event. But it does not seem useful for authors to constrain themselves to this if most (or maybe all) <span class="css" id="ref-for-valdef-media-scripting-initial-only①">initial-only</span> UAs also load external scripts (including <span class="css">async</span> and <span class="css">defer</span>) and fire the load event. On the other hand, requiring external scripts to be loaded and the load event to be fired could exclude UAs like Opera mini, which typically do run them, but may decide not to based on timeouts and other heuristics. <a href="https://github.com/w3c/csswg-drafts/issues/503"><https://github.com/w3c/csswg-drafts/issues/503></a></p> <dt><dfn class="dfn-paneled css" data-dfn-for="@media/scripting" data-dfn-type="value" data-export id="valdef-media-scripting-none">none</dfn> <dd> Indicates that the user agent will not run scripts for this document; either it doesn’t support a scripting language, or the support isn’t active for the current document. </dl> <p>Some user agents have the ability to turn off scripting support on a per script basis or per domain basis, allowing some, but not all, scripts to run in a particular document. The <a class="property" data-link-type="propdesc" href="#descdef-media-scripting" id="ref-for-descdef-media-scripting②">scripting</a> media feature does not allow fine grained detection of which script is allowed to run. In this scenario, the value of the <span class="property" id="ref-for-descdef-media-scripting③">scripting</span> media feature should be <a class="css" data-link-type="maybe" href="#valdef-media-scripting-enabled" id="ref-for-valdef-media-scripting-enabled">enabled</a> or <a class="css" data-link-type="maybe" href="#valdef-media-scripting-initial-only" id="ref-for-valdef-media-scripting-initial-only②">initial-only</a> if scripts originating on the same domain as the document are allowed to run, and <a class="css" data-link-type="maybe" href="#valdef-media-scripting-none" id="ref-for-valdef-media-scripting-none">none</a> otherwise.</p> <p class="note" role="note"><span>Note:</span> A future level of CSS may extend this media feature to allow fine-grained detection of which script is allowed to run.</p> <h2 class="heading settled" data-level="4" id="custom-mq"><span class="secno">4. </span><span class="content"> Custom Media Queries</span><a class="self-link" href="#custom-mq"></a></h2> <p>When designing documents that use media queries, the same media query may be used in multiple places, such as to qualify multiple <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-3/#at-ruledef-import" id="ref-for-at-ruledef-import">@import</a> statements. Repeating the same media query multiple times is an editing hazard; an author making a change must edit every copy in the same way, or suffer from difficult-to-find bugs in their CSS.</p> <p>To help ameliorate this, this specification defines a method of defining <a data-link-type="dfn" href="#custom-media-query" id="ref-for-custom-media-query">custom media queries</a>, which are simply-named aliases for longer and more complex media queries. In this way, a media query used in multiple places can instead be assigned to a <span id="ref-for-custom-media-query①">custom media query</span>, which can be used everywhere, and editing the media query requires touching only one line of code.</p> <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="custom-media-query">custom media query</dfn> is defined with the <a class="css" data-link-type="maybe" href="#at-ruledef-custom-media" id="ref-for-at-ruledef-custom-media">@custom-media</a> rule:</p> <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-custom-media">@custom-media</dfn> = @custom-media <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-extensions-1/#typedef-extension-name" id="ref-for-typedef-extension-name"><extension-name></a> [ <a class="production" data-link-type="type" href="https://drafts.csswg.org/mediaqueries-4/#typedef-media-query-list" id="ref-for-typedef-media-query-list"><media-query-list></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> true <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> false ] ; </pre> <p>The <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-extensions-1/#typedef-extension-name" id="ref-for-typedef-extension-name①"><extension-name></a> can then be used in a <a data-link-type="dfn" href="https://drafts.csswg.org/mediaqueries-4/#media-feature" id="ref-for-media-feature②">media feature</a>. It <strong>must</strong> be used in a <a data-link-type="dfn" href="#boolean-context" id="ref-for-boolean-context">boolean context</a>; using them in a normal or <a data-link-type="dfn" href="https://drafts.csswg.org/mediaqueries-4/#range-context" id="ref-for-range-context">range context</a> is a syntax error. If a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/mediaqueries-4/#typedef-media-query-list" id="ref-for-typedef-media-query-list①"><media-query-list></a> is given, the <a data-link-type="dfn" href="#custom-media-query" id="ref-for-custom-media-query②">custom media query</a> evaluates to true if the <span class="production" id="ref-for-typedef-media-query-list②"><media-query-list></span> it represents evaluates to true, and false otherwise. If <dfn class="css" data-dfn-for="@custom-media" data-dfn-type="value" data-export id="valdef-custom-media-true">true<a class="self-link" href="#valdef-custom-media-true"></a></dfn> or <dfn class="css" data-dfn-for="@custom-media" data-dfn-type="value" data-export id="valdef-custom-media-false">false<a class="self-link" href="#valdef-custom-media-false"></a></dfn> is given, the <span id="ref-for-custom-media-query③">custom media query</span> evaluates to true or false, respectively.</p> <p>A <a class="css" data-link-type="maybe" href="#at-ruledef-custom-media" id="ref-for-at-ruledef-custom-media①">@custom-media</a> rule can refer to other <a data-link-type="dfn" href="#custom-media-query" id="ref-for-custom-media-query④">custom media queries</a>. However, loops are forbidden, and a <span id="ref-for-custom-media-query⑤">custom media query</span> must not be defined in terms of itself or of another <span id="ref-for-custom-media-query⑥">custom media query</span> that directly or indirectly refers to it. Any such attempt of defining a <span id="ref-for-custom-media-query⑦">custom media query</span> with a circular dependency must cause all the <span id="ref-for-custom-media-query⑧">custom media queries</span> in the loop to fail to be defined.</p> <p>If multiple <a class="css" data-link-type="maybe" href="#at-ruledef-custom-media" id="ref-for-at-ruledef-custom-media②">@custom-media</a> rules declare the same <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-extensions-1/#typedef-extension-name" id="ref-for-typedef-extension-name②"><extension-name></a>, the truth value is based on the last one alone, ignoring all previous declarations of the same <span class="production" id="ref-for-typedef-extension-name③"><extension-name></span>.</p> <p class="note" role="note"><span>Note:</span> For error handling purposes, an undefined <a data-link-type="dfn" href="https://drafts.csswg.org/mediaqueries-4/#media-feature" id="ref-for-media-feature③">media feature</a> is different from a <span id="ref-for-media-feature④">media feature</span> that evaluates to false. See <a href="https://www.w3.org/TR/mediaqueries-4/#error-handling">Media Queries 4 §3.2 Error Handling</a> for details.</p> <div class="example" id="example-c280b211"> <a class="self-link" href="#example-c280b211"></a> For example, if a responsive site uses a particular breakpoint in several places, it can alias that with a reasonable name: <pre>@custom-media --narrow-window (max-width: 30em); @media (--narrow-window) { /* narrow window styles */ } @media (--narrow-window) and (script) { /* special styles for when script is allowed */ } /* etc */ </pre> </div> <h3 class="heading settled" data-level="4.1" id="script-custom-mq"><span class="secno">4.1. </span><span class="content"> Script-based Custom Media Queries</span><a class="self-link" href="#script-custom-mq"></a></h3> <div class="issue" id="issue-bab99524"> <a class="self-link" href="#issue-bab99524"></a> Define a map of names to values for JS. Values can be either a MediaQueryList object or a boolean, in which case it’s treated identically to the above, or can be a number or a string, in which case it’s treated like a normal MQ, and can use the normal or range context syntax. Like: <pre><script> CSS.customMedia.set('--foo', 5); </script> <style> @media (_foo: 5) { ... } @media (_foo < 10) { ... } </style> </pre> </div> <h2 class="heading settled" data-level="5" id="mf-user-preferences"><span class="secno">5. </span><span class="content"> User Preference Media Features</span><a class="self-link" href="#mf-user-preferences"></a></h2> <h3 class="heading settled" data-level="5.1" id="inverted"><span class="secno">5.1. </span><span class="content"> Detecting the desire for inverted colors on the display: the <a class="property" data-link-type="propdesc" href="#descdef-media-inverted-colors" id="ref-for-descdef-media-inverted-colors">inverted-colors</a> feature</span><a class="self-link" href="#inverted"></a></h3> <table class="def descdef mq"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-for="@media" data-dfn-type="descriptor" data-export id="descdef-media-inverted-colors">inverted-colors</dfn> <tr> <th>For: <td><a class="css" data-link-type="at-rule" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media③">@media</a> <tr> <th>Value: <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> inverted <tr> <th>Type: <td>discrete </table> <p>The <a class="property" data-link-type="propdesc" href="#descdef-media-inverted-colors" id="ref-for-descdef-media-inverted-colors①">inverted-colors</a> media feature indicates whether the content is displayed normally, or whether colors have been inverted.</p> <p class="note" role="note"><span>Note:</span> This is an indication that the user agent or underlying operating system has forcibly inverted all colors, not a request to do so. This is sometimes provided as a simple accessibility feature, allowing users to switch between light-on-dark and dark-on-light text. However, this has unpleasant side effects, such as inverting pictures, or turning shadows into highlights, which reduce the readability of the content.</p> <dl> <dt><dfn class="css" data-dfn-for="@media/inverted-colors" data-dfn-type="value" data-export id="valdef-media-inverted-colors-none">none<a class="self-link" href="#valdef-media-inverted-colors-none"></a></dfn> <dd> Colors are displayed normally. <dt><dfn class="css" data-dfn-for="@media/inverted-colors" data-dfn-type="value" data-export id="valdef-media-inverted-colors-inverted">inverted<a class="self-link" href="#valdef-media-inverted-colors-inverted"></a></dfn> <dd> All pixels within the displayed area have been inverted. <p>This value must not match if the User Agent has done some kind of content aware inversion such as one that preserves the images.</p> <p class="note" role="note"><span>Note:</span> This is because the goal of this media feature is to enable authors to mitigate the undesirable effects of the non content aware approach that invert <em>all</em> the pixels. If the author were to take counter measures even in the content-aware cases, their counter measures and the UA’s would be at risk of cancelling each other.</p> </dl> <div class="example" id="example-d87cc4ed"> <a class="self-link" href="#example-d87cc4ed"></a> For example, a user frequently using their operating system’s ability to invert the screens color may want to add the following to their user style sheet, to limit the undesirable side effects of the inversion. <pre>@media (inverted-colors) { img { filter: invert(100%); } * { text-shadow: none !important; box-shadow: none !important; } } </pre> </div> <h3 class="heading settled" data-level="5.2" id="prefers-reduced-motion"><span class="secno">5.2. </span><span class="content"> Detecting the desire for less motion on the page: the <a class="property" data-link-type="propdesc" href="#descdef-media-prefers-reduced-motion" id="ref-for-descdef-media-prefers-reduced-motion">prefers-reduced-motion</a> feature</span><a class="self-link" href="#prefers-reduced-motion"></a></h3> <table class="def descdef mq"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-for="@media" data-dfn-type="descriptor" data-export id="descdef-media-prefers-reduced-motion">prefers-reduced-motion</dfn> <tr> <th>For: <td><a class="css" data-link-type="at-rule" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media④">@media</a> <tr> <th>Value: <td class="prod">no-preference <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> reduce <tr> <th>Type: <td>discrete </table> <p>The <a class="property" data-link-type="propdesc" href="#descdef-media-prefers-reduced-motion" id="ref-for-descdef-media-prefers-reduced-motion①">prefers-reduced-motion</a> media feature is used to detect if the user has requested the system minimize the amount of animation or motion it uses.</p> <dl> <dt><dfn class="css" data-dfn-for="@media/prefers-reduced-motion" data-dfn-type="value" data-export id="valdef-media-prefers-reduced-motion-no-preference">no-preference<a class="self-link" href="#valdef-media-prefers-reduced-motion-no-preference"></a></dfn> <dd> Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the <a data-link-type="dfn" href="#boolean-context" id="ref-for-boolean-context①">boolean context</a>. <dt><dfn class="css" data-dfn-for="@media/prefers-reduced-motion" data-dfn-type="value" data-export id="valdef-media-prefers-reduced-motion-reduce">reduce<a class="self-link" href="#valdef-media-prefers-reduced-motion-reduce"></a></dfn> <dd> Indicates that user has notified the system that they prefer an interface that minimizes the amount of movement or animation, preferably to the point where all non-essential movement is removed. </dl> <h3 class="heading settled" data-level="5.3" id="prefers-reduced-transparency"><span class="secno">5.3. </span><span class="content"> Detecting the desire for reduced transparency on the page: the <a class="property" data-link-type="propdesc" href="#descdef-media-prefers-reduced-transparency" id="ref-for-descdef-media-prefers-reduced-transparency">prefers-reduced-transparency</a> feature</span><a class="self-link" href="#prefers-reduced-transparency"></a></h3> <table class="def descdef mq"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-for="@media" data-dfn-type="descriptor" data-export id="descdef-media-prefers-reduced-transparency">prefers-reduced-transparency</dfn> <tr> <th>For: <td><a class="css" data-link-type="at-rule" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media⑤">@media</a> <tr> <th>Value: <td class="prod">no-preference <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> reduce <tr> <th>Type: <td>discrete </table> <p>The <a class="property" data-link-type="propdesc" href="#descdef-media-prefers-reduced-transparency" id="ref-for-descdef-media-prefers-reduced-transparency①">prefers-reduced-transparency</a> media feature is used to detect if the user has requested the system minimize the amount of transparent or translucent layer effects it uses.</p> <dl> <dt><dfn class="css" data-dfn-for="@media/prefers-reduced-transparency" data-dfn-type="value" data-export id="valdef-media-prefers-reduced-transparency-no-preference">no-preference<a class="self-link" href="#valdef-media-prefers-reduced-transparency-no-preference"></a></dfn> <dd> Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the <a data-link-type="dfn" href="#boolean-context" id="ref-for-boolean-context②">boolean context</a>. <dt><dfn class="css" data-dfn-for="@media/prefers-reduced-transparency" data-dfn-type="value" data-export id="valdef-media-prefers-reduced-transparency-reduce">reduce<a class="self-link" href="#valdef-media-prefers-reduced-transparency-reduce"></a></dfn> <dd> Indicates that user has notified the system that they prefer an interface that minimizes the amount of transparent or translucent layer effects. </dl> <p class="issue" id="issue-34934443"><a class="self-link" href="#issue-34934443"></a> How does this interact with preferences around e.g. pattern fills and backgrounds? They’re not about transparency, but they also interfere with shape recognition.</p> <h3 class="heading settled" data-level="5.4" id="prefers-contrast"><span class="secno">5.4. </span><span class="content"> Detecting the desire for increased or decreased color contrast from elements on the page: the <a class="property" data-link-type="propdesc" href="#descdef-media-prefers-contrast" id="ref-for-descdef-media-prefers-contrast">prefers-contrast</a> feature</span><a class="self-link" href="#prefers-contrast"></a></h3> <table class="def descdef mq"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-for="@media" data-dfn-type="descriptor" data-export id="descdef-media-prefers-contrast">prefers-contrast</dfn> <tr> <th>For: <td><a class="css" data-link-type="at-rule" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media⑥">@media</a> <tr> <th>Value: <td class="prod">no-preference <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> high <span id="ref-for-comb-one①②">|</span> low <tr> <th>Type: <td>discrete </table> <p>The <a class="property" data-link-type="propdesc" href="#descdef-media-prefers-contrast" id="ref-for-descdef-media-prefers-contrast①">prefers-contrast</a> media feature is used to detect if the user has requested the system increase or decrease the amount of contrast between adjacent colors. For example, many users have difficulty reading text that has a small difference in contrast to the text background and would prefer a larger contrast.</p> <dl> <dt><dfn class="css" data-dfn-for="@media/prefers-contrast" data-dfn-type="value" data-export id="valdef-media-prefers-contrast-no-preference">no-preference<a class="self-link" href="#valdef-media-prefers-contrast-no-preference"></a></dfn> <dd> Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the <a data-link-type="dfn" href="#boolean-context" id="ref-for-boolean-context③">boolean context</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="@media/prefers-contrast" data-dfn-type="value" data-export id="valdef-media-prefers-contrast-high">high</dfn> <dd> Indicates that user has notified the system that they prefer an interface that has a higher level of contrast. <dt><dfn class="css" data-dfn-for="@media/prefers-contrast" data-dfn-type="value" data-export id="valdef-media-prefers-contrast-low">low<a class="self-link" href="#valdef-media-prefers-contrast-low"></a></dfn> <dd> Indicates that user has notified the system that they prefer an interface that has a lower level of contrast. </dl> <p class="issue" id="issue-96ce19f7"><a class="self-link" href="#issue-96ce19f7"></a> Split <a class="css" data-link-type="maybe" href="#valdef-media-prefers-contrast-high" id="ref-for-valdef-media-prefers-contrast-high">high</a> into two levels, “extremely high” (as used in MSFT’s black-on-white high conrast theme) and “increased (as implemented in Apple’s Increased Contrast settings)? <a href="https://github.com/w3c/csswg-drafts/issues/2943"><https://github.com/w3c/csswg-drafts/issues/2943></a></p> <h3 class="heading settled" data-level="5.5" id="prefers-color-scheme"><span class="secno">5.5. </span><span class="content"> Detecting the desire for light or dark color schemes: the <a class="property" data-link-type="propdesc" href="#descdef-media-prefers-color-scheme" id="ref-for-descdef-media-prefers-color-scheme">prefers-color-scheme</a> feature</span><a class="self-link" href="#prefers-color-scheme"></a></h3> <table class="def descdef mq"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-for="@media" data-dfn-type="descriptor" data-export id="descdef-media-prefers-color-scheme">prefers-color-scheme</dfn> <tr> <th>For: <td><a class="css" data-link-type="at-rule" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media⑦">@media</a> <tr> <th>Value: <td class="prod">no-preference <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①③">|</a> light <span id="ref-for-comb-one①④">|</span> dark <tr> <th>Type: <td>discrete </table> <p>The <a class="property" data-link-type="propdesc" href="#descdef-media-prefers-color-scheme" id="ref-for-descdef-media-prefers-color-scheme①">prefers-color-scheme</a> media feature reflects the user’s desire that the page use a light or dark color theme.</p> <dl> <dt><dfn class="css" data-dfn-for="@media/prefers-color-scheme" data-dfn-type="value" data-export id="valdef-media-prefers-color-scheme-no-preference">no-preference<a class="self-link" href="#valdef-media-prefers-color-scheme-no-preference"></a></dfn> <dd> Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the <a data-link-type="dfn" href="#boolean-context" id="ref-for-boolean-context④">boolean context</a>. <dt><dfn class="css" data-dfn-for="@media/prefers-color-scheme" data-dfn-type="value" data-export id="valdef-media-prefers-color-scheme-light">light<a class="self-link" href="#valdef-media-prefers-color-scheme-light"></a></dfn> <dd> Indicates that user has expressed the preference for a page that has a light theme (dark text on light background). <dt><dfn class="css" data-dfn-for="@media/prefers-color-scheme" data-dfn-type="value" data-export id="valdef-media-prefers-color-scheme-dark">dark<a class="self-link" href="#valdef-media-prefers-color-scheme-dark"></a></dfn> <dd> Indicates that user has expressed the preference for a page that has a dark theme (light text on dark background). </dl> <p>The method by which the user expresses their preference can vary. It might be a system-wide setting exposed by the Operating System, or a setting controlled by the User Agent.</p> <p class="note" role="note"><span>Note:</span> User preferences can also vary by medium. For example, a user may prefer dark themes on a glowing screen, but light themes when printing (to save ink and/or because inked text on blank paper prints better than blank letterforms knocked out of an inked background). UAs are expected to take such variances into consideration so that <a class="property" data-link-type="propdesc" href="#descdef-media-prefers-color-scheme" id="ref-for-descdef-media-prefers-color-scheme②">prefers-color-scheme</a> reflects preferences appropriate to the medium rather than preferences taken out of context.</p> <h3 class="heading settled" data-level="5.6" id="forced-colors"><span class="secno">5.6. </span><span class="content"> Detecting a forced color palette: the <a class="property" data-link-type="propdesc" href="#descdef-media-forced-colors" id="ref-for-descdef-media-forced-colors">forced-colors</a> feature</span><a class="self-link" href="#forced-colors"></a></h3> <table class="def descdef mq"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-for="@media" data-dfn-type="descriptor" data-export id="descdef-media-forced-colors">forced-colors</dfn> <tr> <th>For: <td><a class="css" data-link-type="at-rule" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media⑧">@media</a> <tr> <th>Value: <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑤">|</a> active <tr> <th>Type: <td>discrete </table> <p>The <a class="property" data-link-type="propdesc" href="#descdef-media-forced-colors" id="ref-for-descdef-media-forced-colors①">forced-colors</a> media feature is used to detect if the user agent has enabled a <a data-link-type="dfn" href="https://drafts.csswg.org/css-color-adjust-1/#forced-colors-mode" id="ref-for-forced-colors-mode">forced colors mode</a> where it enforces a user-chosen limited color palette on the page.</p> <dl> <dt><dfn class="css" data-dfn-for="@media/prefers-color-scheme" data-dfn-type="value" data-export id="valdef-media-prefers-color-scheme-none">none<a class="self-link" href="#valdef-media-prefers-color-scheme-none"></a></dfn> <dd> <a data-link-type="dfn" href="https://drafts.csswg.org/css-color-adjust-1/#forced-colors-mode" id="ref-for-forced-colors-mode①">Forced colors mode</a> is not active; the page’s colors are not being forced into a limited palette. <dt><dfn class="css" data-dfn-for="@media/prefers-color-scheme" data-dfn-type="value" data-export id="valdef-media-prefers-color-scheme-active">active<a class="self-link" href="#valdef-media-prefers-color-scheme-active"></a></dfn> <dd> Indicates that <a data-link-type="dfn" href="https://drafts.csswg.org/css-color-adjust-1/#forced-colors-mode" id="ref-for-forced-colors-mode②">forced colors mode</a> is active. The UA will provide the color palette to authors through the CSS system color keywords and, if appropriate, trigger the appropriate value of <a class="property" data-link-type="propdesc" href="#descdef-media-prefers-color-scheme" id="ref-for-descdef-media-prefers-color-scheme③">prefers-color-scheme</a> so that authors can adapt the page. See [[!css-color-adjust-1#forced]] for details. </dl> <h3 class="heading settled" data-level="5.7" id="prefers-reduced-data"><span class="secno">5.7. </span><span class="content"> Detecting the desire for reduced data usage when loading a page: the <a class="property" data-link-type="propdesc" href="#descdef-media-prefers-reduced-data" id="ref-for-descdef-media-prefers-reduced-data">prefers-reduced-data</a> feature</span><a class="self-link" href="#prefers-reduced-data"></a></h3> <p class="issue" id="issue-22536363"><a class="self-link" href="#issue-22536363"></a> This feature may be an undesired source of fingerprinting, with a bias towards low income with limited data. A Privacy and Security section should be added to this spec, and it should address this concern. <a href="https://github.com/w3c/csswg-drafts/issues/4832"><https://github.com/w3c/csswg-drafts/issues/4832></a></p> <p class="issue" id="issue-cdd0a2a0"><a class="self-link" href="#issue-cdd0a2a0"></a> It might be useful for this feature to be more than a binary switch, and instead express different degrees of preference for limited data. <a href="https://github.com/w3c/csswg-drafts/issues/4833"><https://github.com/w3c/csswg-drafts/issues/4833></a></p> <p class="issue" id="issue-e89a5833"><a class="self-link" href="#issue-e89a5833"></a> This feature is an early draft, and the CSS-WG does not consider it ready for shipping in production. <a href="https://github.com/w3c/csswg-drafts/issues/4834"><https://github.com/w3c/csswg-drafts/issues/4834></a></p> <table class="def descdef mq"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-for="@media" data-dfn-type="descriptor" data-export id="descdef-media-prefers-reduced-data">prefers-reduced-data</dfn> <tr> <th>For: <td><a class="css" data-link-type="at-rule" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media⑨">@media</a> <tr> <th>Value: <td class="prod">no-preference <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑥">|</a> reduce <tr> <th>Type: <td>discrete </table> <p>The <a class="property" data-link-type="propdesc" href="#descdef-media-prefers-reduced-data" id="ref-for-descdef-media-prefers-reduced-data①">prefers-reduced-data</a> media feature is used to detect if the user has a preference for being served alternate content that uses less data for the page to be rendered.</p> <dl> <dt><dfn class="css" data-dfn-for="@media/prefers-reduced-data" data-dfn-type="value" data-export id="valdef-media-prefers-reduced-data-no-preference">no-preference<a class="self-link" href="#valdef-media-prefers-reduced-data-no-preference"></a></dfn> <dd> Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the <a data-link-type="dfn" href="#boolean-context" id="ref-for-boolean-context⑤">boolean context</a>. <dt><dfn class="css" data-dfn-for="@media/prefers-reduced-data" data-dfn-type="value" data-export id="valdef-media-prefers-reduced-data-reduce">reduce<a class="self-link" href="#valdef-media-prefers-reduced-data-reduce"></a></dfn> <dd> Indicates that user has expressed the preference for lightweight alternate content. </dl> <p>The method by which the user expresses their preference can vary. It might be a system-wide setting exposed by the Operating System, or a setting controlled by the User Agent.</p> <p class="note" role="note"><span>Note:</span> User Agents may consider setting this based on the same user or system preference as they use to set the <a href="https://wicg.github.io/savedata/">Save-Data</a> HTTP request header.</p> <div class="example" id="example-b1599633"> <a class="self-link" href="#example-b1599633"></a> For example, a site could honour the preference of a user who has turned on data-saving mode by serving a smaller image. <pre>.image { background-image: url("images/heavy.jpg"); } @media (prefers-reduced-data: reduce) { /* Save-Data: On */ .image { background-image: url("images/light.jpg"); } } </pre> </div> <h2 class="no-num heading settled" id="changes"><span class="content"> Changes</span><a class="self-link" href="#changes"></a></h2> <h3 class="heading settled" id="changes-level-5"><span class="content"> Changes Since the Media Queries Level 4</span><a class="self-link" href="#changes-level-5"></a></h3> <p>The following additions were made to this module since the <a href="https://www.w3.org/TR/mediaqueries-4/">Media Queries Level 4</a>:</p> <ul> <li> Reinstate the <a class="property" data-link-type="propdesc" href="#descdef-media-light-level" id="ref-for-descdef-media-light-level②">light-level</a>, <a class="property" data-link-type="propdesc" href="#descdef-media-inverted-colors" id="ref-for-descdef-media-inverted-colors②">inverted-colors</a>, and Custom Media Queries sections from earlier Media Queries Level 4 drafts. <li> Added <a class="property" data-link-type="propdesc" href="#descdef-media-prefers-reduced-motion" id="ref-for-descdef-media-prefers-reduced-motion②">prefers-reduced-motion</a>, <a class="property" data-link-type="propdesc" href="#descdef-media-prefers-reduced-transparency" id="ref-for-descdef-media-prefers-reduced-transparency②">prefers-reduced-transparency</a>, <a class="property" data-link-type="propdesc" href="#descdef-media-prefers-contrast" id="ref-for-descdef-media-prefers-contrast②">prefers-contrast</a>, <a class="property" data-link-type="propdesc" href="#descdef-media-prefers-color-scheme" id="ref-for-descdef-media-prefers-color-scheme④">prefers-color-scheme</a>, and <a class="property" data-link-type="propdesc" href="#descdef-media-forced-colors" id="ref-for-descdef-media-forced-colors②">forced-colors</a> media features. </ul> <h2 class="no-num heading settled" id="acknowledgments"><span class="content"> Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2> <p>This specification is the product of the W3C Working Group on Cascading Style Sheets.</p> <p>Comments from Rossen Atanassov, James Craig, and Elika J. Etemad (fantasai) improved this specification.</p> </main> <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2> <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3> <p>Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. </p> <p>All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p> <p>Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code>class="example"</code>, like this: </p> <div class="example" id="example-ae2b6bc0"> <a class="self-link" href="#example-ae2b6bc0"></a> <p>This is an example of an informative example. </p> </div> <p>Informative notes begin with the word “Note” and are set apart from the normative text with <code>class="note"</code>, like this: </p> <p class="note" role="note">Note, this is an informative note. </p> <p>Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <code><strong class="advisement"></code>, like this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p> <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3> <p>Conformance to this specification is defined for three conformance classes: </p> <dl> <dt>style sheet <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders documents that use them. <dt>authoring tool <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. </dl> <p>A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. </p> <p>A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.) </p> <p>An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module. </p> <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3> <p>The following sections define several conformance requirements for implementing CSS responsibly, in a way that promotes interoperability in the present and future. </p> <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4> <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid (and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support</strong>. In particular, user agents <em>must not</em> selectively ignore unsupported property values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored. </p> <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4> <p>To avoid clashes with future stable CSS features, the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p> <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4> <p>Once a specification reaches the Candidate Recommendation stage, implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec, and should avoid exposing a prefixed variant of that feature. </p> <p>To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group. </p> <p> Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. <script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script> </p> <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#valdef-media-prefers-color-scheme-active">active</a><span>, in §5.6</span> <li><a href="#valdef-media-environment-blending-additive">additive</a><span>, in §2.2</span> <li><a href="#boolean-context">boolean context</a><span>, in §1.1.1</span> <li><a href="#at-ruledef-custom-media">@custom-media</a><span>, in §4</span> <li><a href="#custom-media-query">custom media query</a><span>, in §4</span> <li><a href="#valdef-media-prefers-color-scheme-dark">dark</a><span>, in §5.5</span> <li><a href="#valdef-media-light-level-dim">dim</a><span>, in §2.1</span> <li><a href="#valdef-media-scripting-enabled">enabled</a><span>, in §3.1</span> <li><a href="#descdef-media-environment-blending">environment-blending</a><span>, in §2.2</span> <li><a href="#valdef-custom-media-false">false</a><span>, in §4</span> <li><a href="#descdef-media-forced-colors">forced-colors</a><span>, in §5.6</span> <li><a href="#valdef-media-prefers-contrast-high">high</a><span>, in §5.4</span> <li><a href="#valdef-media-scripting-initial-only">initial-only</a><span>, in §3.1</span> <li><a href="#valdef-media-inverted-colors-inverted">inverted</a><span>, in §5.1</span> <li><a href="#descdef-media-inverted-colors">inverted-colors</a><span>, in §5.1</span> <li><a href="#valdef-media-prefers-color-scheme-light">light</a><span>, in §5.5</span> <li><a href="#descdef-media-light-level">light-level</a><span>, in §2.1</span> <li><a href="#valdef-media-prefers-contrast-low">low</a><span>, in §5.4</span> <li> none <ul> <li><a href="#valdef-media-inverted-colors-none">value for @media/inverted-colors</a><span>, in §5.1</span> <li><a href="#valdef-media-prefers-color-scheme-none">value for @media/prefers-color-scheme</a><span>, in §5.6</span> <li><a href="#valdef-media-scripting-none">value for @media/scripting</a><span>, in §3.1</span> </ul> <li> no-preference <ul> <li><a href="#valdef-media-prefers-color-scheme-no-preference">value for @media/prefers-color-scheme</a><span>, in §5.5</span> <li><a href="#valdef-media-prefers-contrast-no-preference">value for @media/prefers-contrast</a><span>, in §5.4</span> <li><a href="#valdef-media-prefers-reduced-data-no-preference">value for @media/prefers-reduced-data</a><span>, in §5.7</span> <li><a href="#valdef-media-prefers-reduced-motion-no-preference">value for @media/prefers-reduced-motion</a><span>, in §5.2</span> <li><a href="#valdef-media-prefers-reduced-transparency-no-preference">value for @media/prefers-reduced-transparency</a><span>, in §5.3</span> </ul> <li><a href="#valdef-media-light-level-normal">normal</a><span>, in §2.1</span> <li><a href="#valdef-media-environment-blending-opaque">opaque</a><span>, in §2.2</span> <li><a href="#descdef-media-prefers-color-scheme">prefers-color-scheme</a><span>, in §5.5</span> <li><a href="#descdef-media-prefers-contrast">prefers-contrast</a><span>, in §5.4</span> <li><a href="#descdef-media-prefers-reduced-data">prefers-reduced-data</a><span>, in §5.7</span> <li><a href="#descdef-media-prefers-reduced-motion">prefers-reduced-motion</a><span>, in §5.2</span> <li><a href="#descdef-media-prefers-reduced-transparency">prefers-reduced-transparency</a><span>, in §5.3</span> <li> reduce <ul> <li><a href="#valdef-media-prefers-reduced-data-reduce">value for @media/prefers-reduced-data</a><span>, in §5.7</span> <li><a href="#valdef-media-prefers-reduced-motion-reduce">value for @media/prefers-reduced-motion</a><span>, in §5.2</span> <li><a href="#valdef-media-prefers-reduced-transparency-reduce">value for @media/prefers-reduced-transparency</a><span>, in §5.3</span> </ul> <li><a href="#descdef-media-scripting">scripting</a><span>, in §3.1</span> <li><a href="#valdef-media-environment-blending-subtractive">subtractive</a><span>, in §2.2</span> <li><a href="#valdef-custom-media-true">true</a><span>, in §4</span> <li><a href="#valdef-media-light-level-washed">washed</a><span>, in §2.1</span> </ul> <aside class="dfn-panel" data-for="term-for-at-ruledef-import"> <a href="https://drafts.csswg.org/css-cascade-3/#at-ruledef-import">https://drafts.csswg.org/css-cascade-3/#at-ruledef-import</a><b>Referenced in:</b> <ul> <li><a href="#ref-for-at-ruledef-import">4. Custom Media Queries</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-forced-colors-mode"> <a href="https://drafts.csswg.org/css-color-adjust-1/#forced-colors-mode">https://drafts.csswg.org/css-color-adjust-1/#forced-colors-mode</a><b>Referenced in:</b> <ul> <li><a href="#ref-for-forced-colors-mode">5.6. Detecting a forced color palette: the forced-colors feature</a> <a href="#ref-for-forced-colors-mode①">(2)</a> <a href="#ref-for-forced-colors-mode②">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-at-ruledef-media"> <a href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-media">https://drafts.csswg.org/css-conditional-3/#at-ruledef-media</a><b>Referenced in:</b> <ul> <li><a href="#ref-for-at-ruledef-media">2.1. Detecting the ambient light level: the light-level feature</a> <li><a href="#ref-for-at-ruledef-media①">2.2. Detecting the display technology: the environment-blending feature</a> <li><a href="#ref-for-at-ruledef-media②">3.1. Scripting Support: the scripting feature</a> <li><a href="#ref-for-at-ruledef-media③">5.1. Detecting the desire for inverted colors on the display: the inverted-colors feature</a> <li><a href="#ref-for-at-ruledef-media④">5.2. Detecting the desire for less motion on the page: the prefers-reduced-motion feature</a> <li><a href="#ref-for-at-ruledef-media⑤">5.3. Detecting the desire for reduced transparency on the page: the prefers-reduced-transparency feature</a> <li><a href="#ref-for-at-ruledef-media⑥">5.4. Detecting the desire for increased or decreased color contrast from elements on the page: the prefers-contrast feature</a> <li><a href="#ref-for-at-ruledef-media⑦">5.5. Detecting the desire for light or dark color schemes: the prefers-color-scheme feature</a> <li><a href="#ref-for-at-ruledef-media⑧">5.6. Detecting a forced color palette: the forced-colors feature</a> <li><a href="#ref-for-at-ruledef-media⑨">5.7. Detecting the desire for reduced data usage when loading a page: the prefers-reduced-data feature</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-extension-name"> <a href="https://drafts.csswg.org/css-extensions-1/#typedef-extension-name">https://drafts.csswg.org/css-extensions-1/#typedef-extension-name</a><b>Referenced in:</b> <ul> <li><a href="#ref-for-typedef-extension-name">4. Custom Media Queries</a> <a href="#ref-for-typedef-extension-name①">(2)</a> <a href="#ref-for-typedef-extension-name②">(3)</a> <a href="#ref-for-typedef-extension-name③">(4)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-dimension"> <a href="https://drafts.csswg.org/css-values-4/#typedef-dimension">https://drafts.csswg.org/css-values-4/#typedef-dimension</a><b>Referenced in:</b> <ul> <li><a href="#ref-for-typedef-dimension">1.1.1. Evaluating Media Features in a Boolean Context</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-comb-one"> <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b> <ul> <li><a href="#ref-for-comb-one">2.1. Detecting the ambient light level: the light-level feature</a> <a href="#ref-for-comb-one①">(2)</a> <li><a href="#ref-for-comb-one②">2.2. Detecting the display technology: the environment-blending feature</a> <a href="#ref-for-comb-one③">(2)</a> <li><a href="#ref-for-comb-one④">3.1. Scripting Support: the scripting feature</a> <a href="#ref-for-comb-one⑤">(2)</a> <li><a href="#ref-for-comb-one⑥">4. Custom Media Queries</a> <a href="#ref-for-comb-one⑦">(2)</a> <li><a href="#ref-for-comb-one⑧">5.1. Detecting the desire for inverted colors on the display: the inverted-colors feature</a> <li><a href="#ref-for-comb-one⑨">5.2. Detecting the desire for less motion on the page: the prefers-reduced-motion feature</a> <li><a href="#ref-for-comb-one①⓪">5.3. Detecting the desire for reduced transparency on the page: the prefers-reduced-transparency feature</a> <li><a href="#ref-for-comb-one①①">5.4. Detecting the desire for increased or decreased color contrast from elements on the page: the prefers-contrast feature</a> <a href="#ref-for-comb-one①②">(2)</a> <li><a href="#ref-for-comb-one①③">5.5. Detecting the desire for light or dark color schemes: the prefers-color-scheme feature</a> <a href="#ref-for-comb-one①④">(2)</a> <li><a href="#ref-for-comb-one①⑤">5.6. Detecting a forced color palette: the forced-colors feature</a> <li><a href="#ref-for-comb-one①⑥">5.7. Detecting the desire for reduced data usage when loading a page: the prefers-reduced-data feature</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-media-query-list"> <a href="https://drafts.csswg.org/mediaqueries-4/#typedef-media-query-list">https://drafts.csswg.org/mediaqueries-4/#typedef-media-query-list</a><b>Referenced in:</b> <ul> <li><a href="#ref-for-typedef-media-query-list">4. Custom Media Queries</a> <a href="#ref-for-typedef-media-query-list①">(2)</a> <a href="#ref-for-typedef-media-query-list②">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-media-feature"> <a href="https://drafts.csswg.org/mediaqueries-4/#media-feature">https://drafts.csswg.org/mediaqueries-4/#media-feature</a><b>Referenced in:</b> <ul> <li><a href="#ref-for-media-feature">1.1.1. Evaluating Media Features in a Boolean Context</a> <a href="#ref-for-media-feature①">(2)</a> <li><a href="#ref-for-media-feature②">4. Custom Media Queries</a> <a href="#ref-for-media-feature③">(2)</a> <a href="#ref-for-media-feature④">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-media-query"> <a href="https://drafts.csswg.org/mediaqueries-4/#media-query">https://drafts.csswg.org/mediaqueries-4/#media-query</a><b>Referenced in:</b> <ul></ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-media-update-none"> <a href="https://drafts.csswg.org/mediaqueries-4/#valdef-media-update-none">https://drafts.csswg.org/mediaqueries-4/#valdef-media-update-none</a><b>Referenced in:</b> <ul> <li><a href="#ref-for-valdef-media-update-none">1.1.1. Evaluating Media Features in a Boolean Context</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-range-context"> <a href="https://drafts.csswg.org/mediaqueries-4/#range-context">https://drafts.csswg.org/mediaqueries-4/#range-context</a><b>Referenced in:</b> <ul> <li><a href="#ref-for-range-context">4. Custom Media Queries</a> </ul> </aside> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[css-cascade-3]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="term-for-at-ruledef-import" style="color:initial">@import</span> </ul> <li> <a data-link-type="biblio">[css-color-adjust-1]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="term-for-forced-colors-mode" style="color:initial">forced colors mode</span> </ul> <li> <a data-link-type="biblio">[css-conditional-3]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="term-for-at-ruledef-media" style="color:initial">@media</span> </ul> <li> <a data-link-type="biblio">[CSS-EXTENSIONS]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="term-for-typedef-extension-name" style="color:initial"><extension-name></span> </ul> <li> <a data-link-type="biblio">[css-values-4]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="term-for-typedef-dimension" style="color:initial"><dimension></span> <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span> </ul> <li> <a data-link-type="biblio">[MEDIAQUERIES-4]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="term-for-typedef-media-query-list" style="color:initial"><media-query-list></span> <li><span class="dfn-paneled" id="term-for-media-feature" style="color:initial">media feature</span> <li><span class="dfn-paneled" id="term-for-media-query" style="color:initial">media query</span> <li><span class="dfn-paneled" id="term-for-valdef-media-update-none" style="color:initial">none</span> <li><span class="dfn-paneled" id="term-for-range-context" style="color:initial">range context</span> </ul> </ul> <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-css-cascade-3">[CSS-CASCADE-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-3/">CSS Cascading and Inheritance Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-3/">https://www.w3.org/TR/css-cascade-3/</a> <dt id="biblio-css-color-adjust-1">[CSS-COLOR-ADJUST-1] <dd>Elika Etemad; Rossen Atanassov; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-color-adjust-1/">CSS Color Adjustment Module Level 1</a>. 23 May 2019. WD. URL: <a href="https://www.w3.org/TR/css-color-adjust-1/">https://www.w3.org/TR/css-color-adjust-1/</a> <dt id="biblio-css-conditional-3">[CSS-CONDITIONAL-3] <dd>CSS Conditional Rules Module Level 3 URL: <a href="https://www.w3.org/TR/css3-conditional/">https://www.w3.org/TR/css3-conditional/</a> <dt id="biblio-css-extensions">[CSS-EXTENSIONS] <dd>Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-extensions/">CSS Extensions</a>. ED. URL: <a href="https://drafts.csswg.org/css-extensions/">https://drafts.csswg.org/css-extensions/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a> <dt id="biblio-mediaqueries-4">[MEDIAQUERIES-4] <dd>Florian Rivoal; Tab Atkins Jr.. <a href="https://www.w3.org/TR/mediaqueries-4/">Media Queries Level 4</a>. 5 September 2017. CR. URL: <a href="https://www.w3.org/TR/mediaqueries-4/">https://www.w3.org/TR/mediaqueries-4/</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a> </dl> <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2> <p>No properties defined.</p> <h3 class="no-num no-ref heading settled" id="media-descriptor-table"><span class="content"><a class="css" data-link-type="at-rule" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media①⓪">@media</a> Descriptors</span><a class="self-link" href="#media-descriptor-table"></a></h3> <div class="big-element-wrapper"> <table class="index"> <thead> <tr> <th scope="col">Name <th scope="col">Value <th scope="col">Initial <th scope="col">Type <tbody> <tr> <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-media-environment-blending" id="ref-for-descdef-media-environment-blending②">environment-blending</a> <td>opaque | additive | subtractive <td> <td>discrete <tr> <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-media-forced-colors" id="ref-for-descdef-media-forced-colors③">forced-colors</a> <td>none | active <td> <td>discrete <tr> <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-media-inverted-colors" id="ref-for-descdef-media-inverted-colors③">inverted-colors</a> <td>none | inverted <td> <td>discrete <tr> <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-media-light-level" id="ref-for-descdef-media-light-level③">light-level</a> <td>dim | normal | washed <td> <td>discrete <tr> <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-media-prefers-color-scheme" id="ref-for-descdef-media-prefers-color-scheme⑤">prefers-color-scheme</a> <td>no-preference | light | dark <td> <td>discrete <tr> <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-media-prefers-contrast" id="ref-for-descdef-media-prefers-contrast③">prefers-contrast</a> <td>no-preference | high | low <td> <td>discrete <tr> <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-media-prefers-reduced-data" id="ref-for-descdef-media-prefers-reduced-data②">prefers-reduced-data</a> <td>no-preference | reduce <td> <td>discrete <tr> <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-media-prefers-reduced-motion" id="ref-for-descdef-media-prefers-reduced-motion③">prefers-reduced-motion</a> <td>no-preference | reduce <td> <td>discrete <tr> <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-media-prefers-reduced-transparency" id="ref-for-descdef-media-prefers-reduced-transparency③">prefers-reduced-transparency</a> <td>no-preference | reduce <td> <td>discrete <tr> <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-media-scripting" id="ref-for-descdef-media-scripting④">scripting</a> <td>none | initial-only | enabled <td> <td>discrete </table> </div> <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2> <div style="counter-reset:issue"> <div class="issue"> Copy level 4 prose when final<a href="#issue-4f3512b7"> ↵ </a></div> <div class="issue"> Copy level 4 prose when final, except the following paragraph which is changed compared to level 4.<a href="#issue-2edbae7d"> ↵ </a></div> <div class="issue"> Using this media feature for accessibility purposes overlaps a lot with <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx">the high-contrast media feature proposed by Microsoft</a>. Can we adjust this so that it covers all use cases for both, or somehow modify them to work in an orthogonal, rather than overlapping, fashion? <a href="#issue-86dff265"> ↵ </a></div> <div class="issue"> Is there a need for the <a class="css" data-link-type="maybe" href="#valdef-media-environment-blending-subtractive">subtractive</a> value?<a href="#issue-c4eeab17"> ↵ </a></div> <div class="issue"> Should there be an explicit minimum threshold to meet before a UA is allowed to claim <a class="css" data-link-type="maybe" href="#valdef-media-scripting-initial-only">initial-only</a>? Having one would mean authors would know what they can depend on, and could tailor their scripts accordingly. On the other hand, pinpointing that threshold is difficult: if it is set too low, the scripting facilities that authors can depend on may be to constrained to be practical, even though actual UAs may potentially all support significantly more. But trying to set it higher may cause us to exclude UAs that do support scripting at loading time, but restrict it in some cases based on complex heuristics. For instance, conservative definitions likely include at least running all inline scripts and firing the DOMContentLoaded event. But it does not seem useful for authors to constrain themselves to this if most (or maybe all) <span class="css">initial-only</span> UAs also load external scripts (including <span class="css">async</span> and <span class="css">defer</span>) and fire the load event. On the other hand, requiring external scripts to be loaded and the load event to be fired could exclude UAs like Opera mini, which typically do run them, but may decide not to based on timeouts and other heuristics. <a href="https://github.com/w3c/csswg-drafts/issues/503"><https://github.com/w3c/csswg-drafts/issues/503></a><a href="#issue-168bd904"> ↵ </a></div> <div class="issue"> Define a map of names to values for JS. Values can be either a MediaQueryList object or a boolean, in which case it’s treated identically to the above, or can be a number or a string, in which case it’s treated like a normal MQ, and can use the normal or range context syntax. Like: <pre><script> CSS.customMedia.set('--foo', 5); </script> <style> @media (_foo: 5) { ... } @media (_foo < 10) { ... } </style> </pre> <a href="#issue-bab99524"> ↵ </a> </div> <div class="issue"> How does this interact with preferences around e.g. pattern fills and backgrounds? They’re not about transparency, but they also interfere with shape recognition.<a href="#issue-34934443"> ↵ </a></div> <div class="issue"> Split <a class="css" data-link-type="maybe" href="#valdef-media-prefers-contrast-high">high</a> into two levels, “extremely high” (as used in MSFT’s black-on-white high conrast theme) and “increased (as implemented in Apple’s Increased Contrast settings)? <a href="https://github.com/w3c/csswg-drafts/issues/2943"><https://github.com/w3c/csswg-drafts/issues/2943></a><a href="#issue-96ce19f7"> ↵ </a></div> <div class="issue"> This feature may be an undesired source of fingerprinting, with a bias towards low income with limited data. A Privacy and Security section should be added to this spec, and it should address this concern. <a href="https://github.com/w3c/csswg-drafts/issues/4832"><https://github.com/w3c/csswg-drafts/issues/4832></a><a href="#issue-22536363"> ↵ </a></div> <div class="issue"> It might be useful for this feature to be more than a binary switch, and instead express different degrees of preference for limited data. <a href="https://github.com/w3c/csswg-drafts/issues/4833"><https://github.com/w3c/csswg-drafts/issues/4833></a><a href="#issue-cdd0a2a0"> ↵ </a></div> <div class="issue"> This feature is an early draft, and the CSS-WG does not consider it ready for shipping in production. <a href="https://github.com/w3c/csswg-drafts/issues/4834"><https://github.com/w3c/csswg-drafts/issues/4834></a><a href="#issue-e89a5833"> ↵ </a></div> </div> <aside class="dfn-panel" data-for="boolean-context"> <b><a href="#boolean-context">#boolean-context</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-boolean-context">4. Custom Media Queries</a> <li><a href="#ref-for-boolean-context①">5.2. Detecting the desire for less motion on the page: the prefers-reduced-motion feature</a> <li><a href="#ref-for-boolean-context②">5.3. Detecting the desire for reduced transparency on the page: the prefers-reduced-transparency feature</a> <li><a href="#ref-for-boolean-context③">5.4. Detecting the desire for increased or decreased color contrast from elements on the page: the prefers-contrast feature</a> <li><a href="#ref-for-boolean-context④">5.5. Detecting the desire for light or dark color schemes: the prefers-color-scheme feature</a> <li><a href="#ref-for-boolean-context⑤">5.7. Detecting the desire for reduced data usage when loading a page: the prefers-reduced-data feature</a> </ul> </aside> <aside class="dfn-panel" data-for="descdef-media-light-level"> <b><a href="#descdef-media-light-level">#descdef-media-light-level</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-descdef-media-light-level">2.1. Detecting the ambient light level: the light-level feature</a> <a href="#ref-for-descdef-media-light-level①">(2)</a> <li><a href="#ref-for-descdef-media-light-level②"> Changes Since the Media Queries Level 4</a> </ul> </aside> <aside class="dfn-panel" data-for="descdef-media-environment-blending"> <b><a href="#descdef-media-environment-blending">#descdef-media-environment-blending</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-descdef-media-environment-blending">2.2. Detecting the display technology: the environment-blending feature</a> <a href="#ref-for-descdef-media-environment-blending①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="valdef-media-environment-blending-subtractive"> <b><a href="#valdef-media-environment-blending-subtractive">#valdef-media-environment-blending-subtractive</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-valdef-media-environment-blending-subtractive">2.2. Detecting the display technology: the environment-blending feature</a> </ul> </aside> <aside class="dfn-panel" data-for="descdef-media-scripting"> <b><a href="#descdef-media-scripting">#descdef-media-scripting</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-descdef-media-scripting">3.1. Scripting Support: the scripting feature</a> <a href="#ref-for-descdef-media-scripting①">(2)</a> <a href="#ref-for-descdef-media-scripting②">(3)</a> <a href="#ref-for-descdef-media-scripting③">(4)</a> </ul> </aside> <aside class="dfn-panel" data-for="valdef-media-scripting-enabled"> <b><a href="#valdef-media-scripting-enabled">#valdef-media-scripting-enabled</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-valdef-media-scripting-enabled">3.1. Scripting Support: the scripting feature</a> </ul> </aside> <aside class="dfn-panel" data-for="valdef-media-scripting-initial-only"> <b><a href="#valdef-media-scripting-initial-only">#valdef-media-scripting-initial-only</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-valdef-media-scripting-initial-only">3.1. Scripting Support: the scripting feature</a> <a href="#ref-for-valdef-media-scripting-initial-only①">(2)</a> <a href="#ref-for-valdef-media-scripting-initial-only②">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="valdef-media-scripting-none"> <b><a href="#valdef-media-scripting-none">#valdef-media-scripting-none</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-valdef-media-scripting-none">3.1. Scripting Support: the scripting feature</a> </ul> </aside> <aside class="dfn-panel" data-for="custom-media-query"> <b><a href="#custom-media-query">#custom-media-query</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-custom-media-query">4. Custom Media Queries</a> <a href="#ref-for-custom-media-query①">(2)</a> <a href="#ref-for-custom-media-query②">(3)</a> <a href="#ref-for-custom-media-query③">(4)</a> <a href="#ref-for-custom-media-query④">(5)</a> <a href="#ref-for-custom-media-query⑤">(6)</a> <a href="#ref-for-custom-media-query⑥">(7)</a> <a href="#ref-for-custom-media-query⑦">(8)</a> <a href="#ref-for-custom-media-query⑧">(9)</a> </ul> </aside> <aside class="dfn-panel" data-for="at-ruledef-custom-media"> <b><a href="#at-ruledef-custom-media">#at-ruledef-custom-media</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-at-ruledef-custom-media">4. Custom Media Queries</a> <a href="#ref-for-at-ruledef-custom-media①">(2)</a> <a href="#ref-for-at-ruledef-custom-media②">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="descdef-media-inverted-colors"> <b><a href="#descdef-media-inverted-colors">#descdef-media-inverted-colors</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-descdef-media-inverted-colors">5.1. Detecting the desire for inverted colors on the display: the inverted-colors feature</a> <a href="#ref-for-descdef-media-inverted-colors①">(2)</a> <li><a href="#ref-for-descdef-media-inverted-colors②"> Changes Since the Media Queries Level 4</a> </ul> </aside> <aside class="dfn-panel" data-for="descdef-media-prefers-reduced-motion"> <b><a href="#descdef-media-prefers-reduced-motion">#descdef-media-prefers-reduced-motion</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-descdef-media-prefers-reduced-motion">5.2. Detecting the desire for less motion on the page: the prefers-reduced-motion feature</a> <a href="#ref-for-descdef-media-prefers-reduced-motion①">(2)</a> <li><a href="#ref-for-descdef-media-prefers-reduced-motion②"> Changes Since the Media Queries Level 4</a> </ul> </aside> <aside class="dfn-panel" data-for="descdef-media-prefers-reduced-transparency"> <b><a href="#descdef-media-prefers-reduced-transparency">#descdef-media-prefers-reduced-transparency</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-descdef-media-prefers-reduced-transparency">5.3. Detecting the desire for reduced transparency on the page: the prefers-reduced-transparency feature</a> <a href="#ref-for-descdef-media-prefers-reduced-transparency①">(2)</a> <li><a href="#ref-for-descdef-media-prefers-reduced-transparency②"> Changes Since the Media Queries Level 4</a> </ul> </aside> <aside class="dfn-panel" data-for="descdef-media-prefers-contrast"> <b><a href="#descdef-media-prefers-contrast">#descdef-media-prefers-contrast</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-descdef-media-prefers-contrast">5.4. Detecting the desire for increased or decreased color contrast from elements on the page: the prefers-contrast feature</a> <a href="#ref-for-descdef-media-prefers-contrast①">(2)</a> <li><a href="#ref-for-descdef-media-prefers-contrast②"> Changes Since the Media Queries Level 4</a> </ul> </aside> <aside class="dfn-panel" data-for="valdef-media-prefers-contrast-high"> <b><a href="#valdef-media-prefers-contrast-high">#valdef-media-prefers-contrast-high</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-valdef-media-prefers-contrast-high">5.4. Detecting the desire for increased or decreased color contrast from elements on the page: the prefers-contrast feature</a> </ul> </aside> <aside class="dfn-panel" data-for="descdef-media-prefers-color-scheme"> <b><a href="#descdef-media-prefers-color-scheme">#descdef-media-prefers-color-scheme</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-descdef-media-prefers-color-scheme">5.5. Detecting the desire for light or dark color schemes: the prefers-color-scheme feature</a> <a href="#ref-for-descdef-media-prefers-color-scheme①">(2)</a> <a href="#ref-for-descdef-media-prefers-color-scheme②">(3)</a> <li><a href="#ref-for-descdef-media-prefers-color-scheme③">5.6. Detecting a forced color palette: the forced-colors feature</a> <li><a href="#ref-for-descdef-media-prefers-color-scheme④"> Changes Since the Media Queries Level 4</a> </ul> </aside> <aside class="dfn-panel" data-for="descdef-media-forced-colors"> <b><a href="#descdef-media-forced-colors">#descdef-media-forced-colors</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-descdef-media-forced-colors">5.6. Detecting a forced color palette: the forced-colors feature</a> <a href="#ref-for-descdef-media-forced-colors①">(2)</a> <li><a href="#ref-for-descdef-media-forced-colors②"> Changes Since the Media Queries Level 4</a> </ul> </aside> <aside class="dfn-panel" data-for="descdef-media-prefers-reduced-data"> <b><a href="#descdef-media-prefers-reduced-data">#descdef-media-prefers-reduced-data</a></b><b>Referenced in:</b> <ul> <li><a href="#ref-for-descdef-media-prefers-reduced-data">5.7. Detecting the desire for reduced data usage when loading a page: the prefers-reduced-data feature</a> <a href="#ref-for-descdef-media-prefers-reduced-data①">(2)</a> </ul> </aside> <script>/* script-dfn-panel */ document.body.addEventListener("click", function(e) { var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); } // Find the dfn element or panel, if any, that was clicked on. var el = e.target; var target; var hitALink = false; while(el.parentElement) { if(el.tagName == "A") { // Clicking on a link in a <dfn> shouldn't summon the panel hitALink = true; } if(el.classList.contains("dfn-paneled")) { target = "dfn"; break; } if(el.classList.contains("dfn-panel")) { target = "dfn-panel"; break; } el = el.parentElement; } if(target != "dfn-panel") { // Turn off any currently "on" or "activated" panels. queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){ el.classList.remove("on"); el.classList.remove("activated"); }); } if(target == "dfn" && !hitALink) { // open the panel var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']"); if(dfnPanel) { dfnPanel.classList.add("on"); var rect = el.getBoundingClientRect(); dfnPanel.style.left = window.scrollX + rect.right + 5 + "px"; dfnPanel.style.top = window.scrollY + rect.top + "px"; var panelRect = dfnPanel.getBoundingClientRect(); var panelWidth = panelRect.right - panelRect.left; if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) { // Reposition, because the panel is overflowing dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px"; } } else { console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']"); } } else if(target == "dfn-panel") { // Switch it to "activated" state, which pins it. el.classList.add("activated"); el.style.left = null; el.style.top = null; } }); </script><a class='warning' href='/date/2020-03-18T01:27:29/bikeshed/mediaqueries-5/' id='generator' title='Bikeshed Warnings'><svg height='24' viewbox='0 0 100 100' width='24'><g stroke="blue" stroke-width="6" fill="none"><path fill="blue" stroke="none" d="M 5 95 L 5 35 L 50 10 L 50 95"/><path d="M 1 37 L 54 8"/><path fill="blue" stroke="none" d="M 1 40 v -6 l 60 -32 v 6 z" /><circle cx="75" cy="79" r="15" /><circle fill="blue" stroke="none" cx="75" cy="79" r="4" /><path d="M 75 79 L 65 49 L 55 49" /><path d="M 67 55 L 48 69" /></g></svg></a>