initial commit

1 files changed, 644 insertions, 0 deletions

diff --git a/files/de/web/css/media_queries/using_media_queries/index.html b/files/de/web/css/media_queries/using_media_queries/index.html
new file mode 100644
index 0000000000..f4d15a6c53
--- /dev/null
+++ b/files/de/web/css/media_queries/using_media_queries/index.html
@@ -0,0 +1,644 @@
+---
+title: Using media queries
+slug: Web/CSS/Media_Queries/Using_media_queries
+tags:
+  - NeedsTranslation
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+<p><span class="seoSummary">A <strong>media query</strong> consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Media queries consist of a <a class="internal" href="/en-US/docs/CSS/@media" title="/en-US/docs/CSS/@media">media type</a> and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true or false.  The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on <strong>and</strong> all expressions in the media query are true.</p>
+
+<pre class="brush: html">&lt;!-- CSS media query on a link element --&gt;
+&lt;link rel="stylesheet" media="(max-width: 800px)" href="example.css" /&gt;
+
+&lt;!-- CSS media query within a stylesheet --&gt;
+&lt;style&gt;
+@media (max-width: 600px) {
+  .facet_sidebar {
+    display: none;
+  }
+}
+&lt;/style&gt;</pre>
+
+<p>When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. Style sheets with media queries attached to their <code>&lt;link&gt;</code> tags <a href="http://scottjehl.github.com/CSS-Download-Tests/" title="http://scottjehl.github.com/CSS-Download-Tests/">will still download</a> even if their media queries would return false (they will not apply, however).</p>
+
+<p>Unless you use the <code>not</code> or <code>only</code> operators, the media type is optional and the <code>all</code><span style="line-height: 1.572;"> </span><span style="line-height: 1.572;">type will be implied</span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">.</span></p>
+
+<h3 id="Logical_operators">Logical operators</h3>
+
+<p>You can compose complex media queries using logical operators, including <code>not</code>, <code>and</code>, and <code>only</code>. The <code>and</code> operator is used for combining multiple <a href="#Media_features" title="#Media_features">media features</a> together into a single media query, requiring each chained feature to return true in order for the query to be true. The <code>not</code> operator is used to negate an entire media query. The <code>only</code> operator is used to apply a style only if the entire query matches, useful for preventing older browsers from applying selected styles. If you use the <code>not</code> or <code>only</code> operators, you <em>must</em> specify an explicit media type.</p>
+
+<p>You can also combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the entire media statement returns true. This is equivalent to an <code>or</code> operator.</p>
+
+<h4 id="and">and</h4>
+
+<p>The <code>and</code> keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied <code>all</code> media type, could look like this:</p>
+
+<pre class="brush: css">@media (min-width: 700px) { ... }</pre>
+
+<p>If, however, you wanted this to apply only if the display is in landscape, you could use an <code>and</code> operator to chain the media features together.</p>
+
+<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre>
+
+<p>Now the above media query will only return true if the viewport is 700px wide or wider and the display is in landscape. If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an <code>and</code> operator.</p>
+
+<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ...  }</pre>
+
+<p>Now, the above media query will only apply if the media type is TV, the viewport is 700px wide or wider, and the display is in landscape.</p>
+
+<h4 id="comma-separated_lists">comma-separated lists</h4>
+
+<p>Comma-separated lists behave like the logical operator <code>or</code> when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.</p>
+
+<p>For instance, if you wanted to apply a set of styles if the viewing device either had a minimum width of 700px or was a handheld in landscape, you could write the following:</p>
+
+<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre>
+
+<p>Above, if I were on a <code>screen</code> device with a viewport width of 800px, the media statement would return true because the first part, interpreted as <code>@media all and (min-width: 700px)</code> would apply to my device and therefore return true, despite the fact that my <code>screen</code> device would fail the <code>handheld</code> media type check in the second media query. Likewise, if I were on a <code>handheld</code> device held in landscape with a viewport width of 500px, while the first media query would fail due to the viewport width, the second media query would succeed and thus the media statement would return true.</p>
+
+<h4 id="not">not</h4>
+
+<p>The <code>not</code> keyword applies to the whole media query and returns true if the media query would otherwise return false (such as <code>monochrome</code> on a color display or a screen width of 600px with a <code>min-width: 700px</code> feature query). A <code>not</code> will only negate the media query it is applied to and not to every media query if present in a comma-separated list of media queries. The <code>not</code> keyword cannot be used to negate an individual feature query, only an entire media query. <span style="line-height: 1.572;">For example, the </span><code style="font-size: 14px;">not</code><span style="line-height: 1.572;"> is evaluated last in the following query:</span></p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... }
+</pre>
+
+<p>This means that the query is evaluated like this:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... }
+</pre>
+
+<p>... rather than like this:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre>
+
+<p>As another example, look at the following media query:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color)
+</pre>
+
+<p>It is evaluated like this:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre>
+
+<h4 id="only">only</h4>
+
+<p><span style="line-height: 21px;">The </span><code style="font-size: 14px;">only</code><span style="line-height: 21px;"> keyword prevents older browsers that do not support media queries with media features from applying the given styles:</span></p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="only screen and (color)" href="example.css" /&gt;
+</pre>
+
+<h3 id="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)">Pseudo-BNF (for those of you that like that kind of thing)</h3>
+
+<pre>media_query_list: &lt;media_query&gt; [, &lt;media_query&gt; ]*
+media_query: [[only | not]? &lt;media_type&gt; [ and &lt;expression&gt; ]*]
+  | &lt;expression&gt; [ and &lt;expression&gt; ]*
+expression: ( &lt;media_feature&gt; [: &lt;value&gt;]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid</pre>
+
+<p>Media queries are case insensitive.  Media queries involving unknown media types are always false.</p>
+
+<div class="note"><strong>Note:</strong> Parentheses are required around expressions; failing to use them is an error.</div>
+
+<h2 id="Media_features">Media features</h2>
+
+<p>Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints.  This avoids using the "&lt;" and "&gt;" symbols, which would conflict with HTML and XML.  If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.</p>
+
+<div class="note"><strong>Note:</strong> If a media feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false.  For example, querying the aspect ratio of an aural device always results in false.</div>
+
+<h3 id="color">color</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;color&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Indicates the number of bits per color component of the output device.  If the device is not a color device, this value is zero.</p>
+
+<div class="note"><strong>Note:</strong> If the color components have different numbers of bits per color component, the smallest number is used.  For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component.  If the device uses indexed colors, the minimum number of bits per color component in the color table is used.</div>
+
+<h4 id="Examples">Examples</h4>
+
+<p>To apply a style sheet to all color devices:</p>
+
+<pre class="brush: css">@media all and (color) { ... }
+</pre>
+
+<p>To apply a style sheet to devices with at least 4 bits per color component:</p>
+
+<pre class="brush: css">@media all and (min-color: 4) { ... }
+</pre>
+
+<h3 id="color-index">color-index</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Indicates the number of entries in the color look-up table for the output device.</p>
+
+<h4 id="Examples_2">Examples</h4>
+
+<p>To indicate that a style sheet should apply to all devices using indexed color, you can do:</p>
+
+<pre class="brush: css">@media all and (color-index) { ... }
+</pre>
+
+<p>To apply a style sheet to indexed color devices with at least 256 colors:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /&gt;
+</pre>
+
+<h3 id="aspect-ratio">aspect-ratio</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;ratio&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Describes the aspect ratio of the targeted display area of the output device.  This value consists of two positive integers separated by a slash ("/") character.  This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p>
+
+<h4 id="Example">Example</h4>
+
+<p>The following selects a special style sheet to use for when the display area is at least as wide as it is high.</p>
+
+<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre>
+
+<p>This selects the style when the aspect ratio is either 1:1 or greater. In other words, these styles will only be applied when the viewing area is square or landscape.</p>
+
+<h3 id="device-aspect-ratio">device-aspect-ratio</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;ratio&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Describes the aspect ratio of the output device.  This value consists of two positive integers separated by a slash ("/") character.  This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p>
+
+<h4 id="Example_2">Example</h4>
+
+<p>The following selects a special style sheet to use for widescreen displays.</p>
+
+<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre>
+
+<p>This selects the style when the aspect ratio is either 16:9 or 16:10.</p>
+
+<h3 id="device-height">device-height</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p>
+
+<h4 id="Example_3">Example</h4>
+
+<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels long, you can use this:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="screen and (max-device-height: 799px)" /&gt;
+</pre>
+
+<h3 id="device-width">device-width</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p>
+
+<h4 id="Example_4">Example</h4>
+
+<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:</p>
+
+<pre class="brush: html" style="font-size: 14px;">&lt;link rel="stylesheet" media="screen and (max-device-width: 799px)" /&gt;</pre>
+
+<h3 id="grid">grid</h3>
+
+<p><strong>Value:</strong> <code>&lt;mq-boolean&gt;</code> which is an {{cssxref("&lt;integer&gt;")}} that can only have the <code>0</code> and <code>1</code> value.<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> all<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>Determines whether the output device is a grid device or a bitmap device.  If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1.  Otherwise it is zero.</p>
+
+<h4 id="Example_5">Example</h4>
+
+<p>To apply a style to handheld devices with a 15-character or narrower display:</p>
+
+<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... }
+</pre>
+
+<div class="note"><strong>Note:</strong> The "em" unit has a special meaning for grid devices; since the exact width of an "em" can't be determined, 1em is assumed to be the width of one grid cell horizontally, and the height of one cell vertically.</div>
+
+<h3 id="height">height</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>The <code>height</code> media feature describes the height of the output device's rendering surface (such as the height of the viewport or of the page box on a printer).</p>
+
+<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div>
+
+<h3 id="monochrome">monochrome</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Indicates the number of bits per pixel on a monochrome (greyscale) device.  If the device isn't monochrome, the device's value is 0.</p>
+
+<h4 id="Examples_3">Examples</h4>
+
+<p>To apply a style sheet to all monochrome devices:</p>
+
+<pre class="brush: css">@media all and (monochrome) { ... }
+</pre>
+
+<p>To apply a style sheet to monochrome devices with at least 8 bits per pixel:</p>
+
+<pre class="brush: css">@media all and (min-monochrome: 8) { ... }
+</pre>
+
+<h3 id="orientation">orientation</h3>
+
+<p><strong>Value:</strong> <code>landscape</code> | <code>portrait</code><br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.</p>
+
+<h4 id="Example_6">Example</h4>
+
+<p>To apply a style sheet only in portrait orientation:</p>
+
+<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre>
+
+<div class="note"><strong>Note:</strong> This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.</div>
+
+<h3 id="resolution">resolution</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;resolution&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Indicates the resolution (pixel density) of the output device.  The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).</p>
+
+<h4 id="Example_7">Example</h4>
+
+<p>To apply a style sheet to devices with at least 300 dots per inch of resolution:</p>
+
+<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... }
+</pre>
+
+<p>To replace the old <span style="font-family: courier new,andale mono,monospace; line-height: normal;">(min-device-pixel-ratio: 2) </span>syntax:</p>
+
+<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre>
+
+<h3 id="scan">scan</h3>
+
+<p><strong>Value:</strong> <code>progressive</code> | <code>interlace</code><br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/TV")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>Describes the scanning process of television output devices.</p>
+
+<h4 id="Example_8">Example</h4>
+
+<p>To apply a style sheet only to progressive scanning televisions:</p>
+
+<pre class="brush: css">@media tv and (scan: progressive) { ... }
+</pre>
+
+<h3 id="width">width</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>The <code>width</code> media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).</p>
+
+<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div>
+
+<h4 id="Examples_4">Examples</h4>
+
+<p>If you want to specify a style sheet for handheld devices, or screen devices with a width greater than 20em, you can use this query:</p>
+
+<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+</pre>
+
+<p>This media query specifies a style sheet that applies to printed media wider than 8.5 inches:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" /&gt;
+</pre>
+
+<p>This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:</p>
+
+<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+</pre>
+
+<h2 id="Mozilla-specific_media_features">Mozilla-specific media features</h2>
+
+<p>Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.</p>
+
+<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&amp;16") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;number&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Gives the number of device pixels per CSS pixel.</p>
+
+<div class="geckoVersionNote">
+<p><strong>Do not use this feature. </strong></p>
+
+<p>Use the <code>resolution</code> feature with the <code>dppx</code> unit instead.<br>
+ <br>
+ <code>-moz-device-pixel-ratio</code> may be used for compatibility with Firefox older than 16 and <code>-webkit-device-pixel-ratio</code> with WebKit-based browsers that do not support <code>dppx</code>.</p>
+
+<p>Example:</p>
+
+<pre>@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
+       (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
+       (min-resolution: 2dppx),             /* The standard way */
+       (min-resolution: 192dpi)             /* dppx fallback */ </pre>
+
+<p>See this <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">CSSWG article</a> for compatibility good practices regarding <code>resolution</code> and <code>dppx</code>.</p>
+</div>
+
+<div class="note"><strong>Note</strong>: This media feature is also implemented by Webkit and by <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 for Windows Phone 8.1</a> as <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. The min and max prefixes as implemented by Gecko are named <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> and <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; but the same prefixes as implemented by Webkit are named <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> and <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div>
+
+<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p>
+
+<p><strong>Value:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8 | windows-win10</code><br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:</p>
+
+<ul>
+ <li><code>windows-xp</code></li>
+ <li><code>windows-vista</code></li>
+ <li><code>windows-win7</code></li>
+ <li><code>windows-win8</code></li>
+ <li><code>windows-win10</code></li>
+</ul>
+
+<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<h4 id="Example_9">Example</h4>
+
+<p>You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p>
+
+<p><strong>Value:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:</p>
+
+<ul>
+ <li><code>aero</code></li>
+ <li><code>luna-blue</code></li>
+ <li><code>luna-olive</code></li>
+ <li><code>luna-silver</code></li>
+ <li><code>royale</code></li>
+ <li><code>generic</code></li>
+ <li><code>zune</code></li>
+</ul>
+
+<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome("21") }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatIE("9.0") }}</td>
+   <td>{{ CompatOpera("9") }}</td>
+   <td>{{ CompatSafari("4") }}</td>
+  </tr>
+  <tr>
+   <td>grid</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }} [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>resolution</td>
+   <td>{{ CompatChrome("29") }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }} [2]<br>
+    {{ CompatGeckoDesktop("8.0") }} [3]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>scan</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }} [4]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>grid</code> media type is not supported</p>
+
+<p>[2] Supports {{cssxref("&lt;integer&gt;")}} values;</p>
+
+<p>[3] Supports {{cssxref("&lt;number&gt;")}} values, as per the spec.</p>
+
+<p>[4] <code>tv</code> media type is not supported</p>
+
+<p> </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li>
+ <li><a class="internal" href="/en-US/docs/CSS/@media" title="En/CSS/@media">Media types</a></li>
+ <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li>
+ <li><a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">List of mobile and tablet viewport sizes with pixel ratios and physical sizes</a></li>
+ <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a> by David Walsh</li>
+</ul>