diff options
Diffstat (limited to 'files/de/web/css/media_queries')
4 files changed, 265 insertions, 57 deletions
diff --git a/files/de/web/css/media_queries/index.html b/files/de/web/css/media_queries/index.html index c6da1617ab..7010034fea 100644 --- a/files/de/web/css/media_queries/index.html +++ b/files/de/web/css/media_queries/index.html @@ -10,13 +10,36 @@ tags: - TopicStub translation_of: Web/CSS/Media_Queries --- -<p>{{CSSRef}}</p> +<div class="boxed translate-rendered text-content"> +<div> +<div class="boxed translate-rendered text-content"> +<div>{{CSSRef}}</div> -<p><strong>Media Queries</strong> is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.</p> +<p>Mit <strong>Media Queries</strong> können Sie Ihre Website oder App abhängig vom Vorhandensein oder Wert verschiedener Geräteeigenschaften und Parameter anpassen.</p> -<h2 id="Reference">Reference</h2> +<p>Sie sind eine Schlüsselkomponente des <a href="/de/docs/Web/Progressive_web_apps">responsiven Designs</a>. Eine Media Query kann zum Beispiel die Schriftgröße auf kleinen Geräten verkleinern, den Abstand zwischen Absätzen vergrößern, wenn eine Seite im Hochformat angezeigt wird, oder die Größe von Schaltflächen auf Touchscreens erhöhen.</p> -<h3 id="At-rules">At-rules</h3> +<p>Verwenden Sie in <a href="/de/docs/Web/CSS">CSS</a> die <a href="/de/docs/Web/CSS/At-rule">@-Regeln</a> {{cssxref("@media")}}, um einen Teil eines Stylesheets basierend auf dem Ergebnis einer Media Query bedingt anzuwenden. Verwenden Sie {{cssxref("@import")}}, um ein ganzes Stylesheet bedingt anzuwenden.</p> + +<h3 id="Media_Queries_in_HTML">Media Queries in HTML</h3> + +<p>In <a href="/de/docs/Web/HTML">HTML</a> können Media-Queries auf verschiedene Elemente angewendet werden:</p> + +<ul> + <li>Im {{HTMLElement("link")}}-Attribut des {{htmlattrxref("media", "link")}}-Elements definieren sie das Medium, auf das eine verlinkte Ressource (typischerweise CSS) angewendet werden soll.</li> + <li>Im {{HTMLElement("source")}}-Attribut des {{htmlattrxref("media", "source")}}-Elements definieren sie die Medien, auf die diese Quelle angewendet werden soll. (Dies ist nur innerhalb von {{HTMLElement("Bild")}}-Elementen gültig.)</li> + <li>Im {{HTMLElement("style")}}-Attribut des Elements {{htmlattrxref("media", "style")}} definieren sie die Medien, auf die der Stil angewendet werden soll.</li> +</ul> + +<h3 id="Media_Queries_in_JavaScript">Media Queries in JavaScript</h3> + +<p>In JavaScript können Sie die Methode {{domxref("Window.matchMedia()")}} verwenden, um das Fenster gegen eine Medienabfrage zu testen. Sie können auch {{domxref("MediaQueryList.addListener()")}} verwenden, um benachrichtigt zu werden, wenn sich der Zustand einer Abfrage ändert. Mit dieser Funktionalität kann Ihre Website oder App auf Änderungen der Gerätekonfiguration, der Ausrichtung oder des Zustands reagieren.</p> + +<p>Mehr über die programmatische Verwendung von Media Queries erfahren Sie in <a href="/de/docs/Web/CSS/Media_Queries/Testing_media_queries">Media Queries testen</a>.</p> + +<h2 id="Referenz">Referenz</h2> + +<h3 id="-Regeln">@-Regeln</h3> <div class="index"> <ul> @@ -25,52 +48,61 @@ translation_of: Web/CSS/Media_Queries </ul> </div> -<h2 id="Guides">Guides</h2> +<h2 id="Anleitung">Anleitung</h2> <dl> - <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></dt> - <dd>Presents what media queries are doing and explains the possible expressions.</dd> - <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a></dt> - <dd>Explains how to test a media query programmatically, from JavaScript.</dd> + <dt><a href="/de/docs/Web/CSS/Media_Queries/Using_media_queries">Media Queries verwenden</a></dt> + <dd>Stellt Media Queries, ihre Syntax und die Operatoren und Media Features vor, die zur Konstruktion von Media Query-Ausdrücken verwendet werden.</dd> + <dt><a href="/de/docs/Web/CSS/Media_Queries/Testing_media_queries">Media Queries programmatisch testen</a></dt> + <dd>Beschreibt, wie Sie Media Queries in Ihrem JavaScript-Code verwenden, um den Zustand eines Geräts zu ermitteln und Listener einzurichten, die Ihren Code benachrichtigen, wenn sich die Ergebnisse von Media Queries ändern (z. B. wenn der Benutzer den Bildschirm dreht oder die Größe des Browsers ändert).</dd> + <dt><a href="/de/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility">Verwendung von Media Queries für Barrierefreiheit</a></dt> + <dd>Erfahren Sie, wie Media Queries dem Benutzer helfen können, Ihre Website besser zu verstehen.</dd> </dl> -<h2 id="Specifications">Specifications</h2> +<h2 id="Spezifikationen">Spezifikationen</h2> <table class="standard-table"> <thead> <tr> - <th scope="col">Specification</th> + <th scope="col">Spezifikation</th> <th scope="col">Status</th> - <th scope="col">Comment</th> + <th scope="col">Kommentar</th> </tr> </thead> <tbody> <tr> + <td>{{SpecName('CSS5 Media Queries')}}</td> + <td>{{Spec2('CSS5 Media Queries')}}</td> + <td></td> + </tr> + <tr> <td>{{SpecName('CSS3 Conditional')}}</td> <td>{{Spec2('CSS3 Conditional')}}</td> - <td> </td> + <td></td> </tr> <tr> <td>{{SpecName('CSS4 Media Queries')}}</td> <td>{{Spec2('CSS4 Media Queries')}}</td> - <td> - <p><br> - </p> - </td> + <td></td> </tr> <tr> <td>{{SpecName('CSS3 Media Queries')}}</td> <td>{{Spec2('CSS3 Media Queries')}}</td> - <td> </td> + <td></td> </tr> <tr> <td>{{SpecName('CSS2.1', 'media.html')}}</td> <td>{{Spec2('CSS2.1')}}</td> - <td> </td> + <td>Ursprüngliche Definition</td> </tr> </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<h2 id="Siehe_auch">Siehe auch</h2> -{{Compat("css.at-rules.media")}} +<ul> + <li>Verwenden Sie {{cssxref("@supports")}}, um Stile anzuwenden, die von der Browserunterstützung für verschiedene CSS-Technologien abhängen.</li> +</ul> +</div> +</div> +</div> diff --git a/files/de/web/css/media_queries/testing_media_queries/index.html b/files/de/web/css/media_queries/testing_media_queries/index.html new file mode 100644 index 0000000000..c30abd2ccd --- /dev/null +++ b/files/de/web/css/media_queries/testing_media_queries/index.html @@ -0,0 +1,88 @@ +--- +title: Media Queries programmatisch testen +slug: Web/CSS/Media_Queries/Testing_media_queries +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +<div>{{cssref}}</div> + +<p>The {{Glossary("DOM")}} provides features that can test the results of a <a href="/en-US/docs/Web/CSS/Media_Queries">media query</a> programmatically, via the {{domxref("MediaQueryList")}} interface and its methods and properties. Once you've created a <code>MediaQueryList</code> object, you can check the result of the query or receive notifications when the result changes.</p> + +<h2 id="Creating_a_media_query_list">Creating a media query list</h2> + +<p>Before you can evaluate the results of a media query, you need to create the <code>MediaQueryList</code> object representing the query. To do this, use the {{domxref("window.matchMedia")}} method.</p> + +<p>For example, to set up a query list that determines if the device is in landscape or portrait orientation:</p> + +<pre class="brush: js notranslate">const mediaQueryList = window.matchMedia("(orientation: portrait)"); +</pre> + +<h2 id="Checking_the_result_of_a_query">Checking the result of a query</h2> + +<p>Once you've created your media query list, you can check the result of the query by looking at the value of its <code>matches</code> property:</p> + +<pre class="brush: js notranslate">if (mediaQueryList.matches) { + /* The viewport is currently in portrait orientation */ +} else { + /* The viewport is not currently in portrait orientation, therefore landscape */ +} +</pre> + +<h2 id="Receiving_query_notifications">Receiving query notifications</h2> + +<p>If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a <a href="/en-US/docs/Web/API/EventTarget/addEventListener">listener</a> than to poll the query's result. To do this, call the <code>addListener()</code> method on the {{domxref("MediaQueryList")}} object, with a callback function to invoke when the media query status changes (e.g., the media query test goes from <code>true</code> to <code>false</code>):</p> + +<pre class="brush: js notranslate">// Create the query list. +const mediaQueryList = window.matchMedia("(orientation: portrait)"); + +// Define a callback function for the event listener. +function handleOrientationChange(mql) { + // ... +} + +// Run the orientation change handler once. +handleOrientationChange(mediaQueryList); + +// Add the callback function as a listener to the query list. +mediaQueryList.addListener(handleOrientationChange); +</pre> + +<p>This code creates the orientation-testing media query list, then adds an event listener to it. After adding the listener, we also call the listener directly. This makes our listener perform adjustments based on the current device orientation; otherwise, our code might assume the device is in portrait mode at startup, even if it's actually in landscape mode.</p> + +<p>The <code>handleOrientationChange()</code> function would look at the result of the query and handle whatever we need to do on an orientation change:</p> + +<pre class="brush: js notranslate">function handleOrientationChange(evt) { + if (evt.matches) { + /* The viewport is currently in portrait orientation */ + } else { + /* The viewport is currently in landscape orientation */ + } +} +</pre> + +<p>Above, we define the parameter as <code>evt</code> — an event object. This makes sense because <a href="/en-US/docs/Web/API/MediaQueryList#Browser_compatibility">newer implementations of <code>MediaQueryList</code></a> handle event listeners in a standard way. They no longer use the unusual {{domxref("MediaQueryListListener")}} mechanism, but a standard event listener setup, passing an <a href="/en-US/docs/Web/API/Event">event object</a> of type {{domxref("MediaQueryListEvent")}} as the argument to the callback function.</p> + +<p>This event object also includes the {{domxref("MediaQueryListEvent.media","media")}} and {{domxref("MediaQueryListEvent.matches","matches")}} properties, so you can query these features of the <code>MediaQueryList</code> by directly accessing it, or accessing the event object.</p> + +<h2 id="Ending_query_notifications">Ending query notifications</h2> + +<p>To stop receiving notifications about changes to the value of your media query, call <code>removeListener()</code> on the <code>MediaQueryList</code>, passing it the name of the previously-defined callback function:</p> + +<pre class="brush: js notranslate">mediaQueryList.removeListener(handleOrientationChange); +</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<h3 id="MediaQueryList_interface"><code>MediaQueryList</code> interface</h3> + + + +<p>{{Compat("api.MediaQueryList")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li> + <li>{{domxref("window.matchMedia()")}}</li> + <li>{{domxref("MediaQueryList")}}</li> + <li>{{domxref("MediaQueryListEvent")}}</li> +</ul> 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 index f4d15a6c53..77efb6a299 100644 --- a/files/de/web/css/media_queries/using_media_queries/index.html +++ b/files/de/web/css/media_queries/using_media_queries/index.html @@ -1,17 +1,19 @@ --- -title: Using media queries +title: Media Queries verwenden 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> +<div>{{cssref}}</div> + +<p>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.</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"><!-- CSS media query on a link element --> +<pre class="brush: html notranslate"><!-- CSS media query on a link element --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- CSS media query within a stylesheet --> @@ -37,15 +39,15 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries <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> +<pre class="brush: css notranslate">@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> +<pre class="brush: css notranslate">@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> +<pre class="brush: css notranslate">@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> @@ -55,7 +57,7 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries <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> +<pre class="brush: css notranslate">@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> @@ -63,37 +65,37 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries <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 class="brush: css notranslate" 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 class="brush: css notranslate" 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> +<pre class="brush: css notranslate" 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 class="brush: css notranslate" 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> +<pre class="brush: css notranslate" 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"><link rel="stylesheet" media="only screen and (color)" href="example.css" /> +<pre class="brush: html notranslate"><link rel="stylesheet" media="only screen and (color)" href="example.css" /> </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> +<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: <media_query> [, <media_query> ]* +<pre class="notranslate">media_query_list: <media_query> [, <media_query> ]* media_query: [[only | not]? <media_type> [ and <expression> ]*] | <expression> [ and <expression> ]* expression: ( <media_feature> [: <value>]? ) @@ -135,12 +137,12 @@ media_feature: width | min-width | max-width <p>To apply a style sheet to all color devices:</p> -<pre class="brush: css">@media all and (color) { ... } +<pre class="brush: css notranslate">@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 class="brush: css notranslate">@media all and (min-color: 4) { ... } </pre> <h3 id="color-index">color-index</h3> @@ -155,12 +157,12 @@ media_feature: width | min-width | max-width <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 class="brush: css notranslate">@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"><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> +<pre class="brush: html notranslate"><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> </pre> <h3 id="aspect-ratio">aspect-ratio</h3> @@ -175,7 +177,7 @@ media_feature: width | min-width | max-width <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> +<pre class="brush: css notranslate">@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> @@ -191,7 +193,7 @@ media_feature: width | min-width | max-width <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> +<pre class="brush: css notranslate">@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> @@ -207,7 +209,7 @@ media_feature: width | min-width | max-width <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"><link rel="stylesheet" media="screen and (max-device-height: 799px)" /> +<pre class="brush: html notranslate"><link rel="stylesheet" media="screen and (max-device-height: 799px)" /> </pre> <h3 id="device-width">device-width</h3> @@ -222,7 +224,7 @@ media_feature: width | min-width | max-width <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;"><link rel="stylesheet" media="screen and (max-device-width: 799px)" /></pre> +<pre class="brush: html notranslate" style="font-size: 14px;"><link rel="stylesheet" media="screen and (max-device-width: 799px)" /></pre> <h3 id="grid">grid</h3> @@ -236,7 +238,7 @@ media_feature: width | min-width | max-width <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 class="brush: css notranslate">@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> @@ -263,12 +265,12 @@ media_feature: width | min-width | max-width <p>To apply a style sheet to all monochrome devices:</p> -<pre class="brush: css">@media all and (monochrome) { ... } +<pre class="brush: css notranslate">@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 class="brush: css notranslate">@media all and (min-monochrome: 8) { ... } </pre> <h3 id="orientation">orientation</h3> @@ -283,7 +285,7 @@ media_feature: width | min-width | max-width <p>To apply a style sheet only in portrait orientation:</p> -<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre> +<pre class="brush: css notranslate">@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> @@ -299,12 +301,12 @@ media_feature: width | min-width | max-width <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 class="brush: css notranslate">@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> +<pre class="brush: css notranslate">@media screen and (min-resolution: 2dppx) { ... }</pre> <h3 id="scan">scan</h3> @@ -318,7 +320,7 @@ media_feature: width | min-width | max-width <p>To apply a style sheet only to progressive scanning televisions:</p> -<pre class="brush: css">@media tv and (scan: progressive) { ... } +<pre class="brush: css notranslate">@media tv and (scan: progressive) { ... } </pre> <h3 id="width">width</h3> @@ -335,18 +337,18 @@ media_feature: width | min-width | max-width <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 class="brush: css notranslate">@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"><link rel="stylesheet" media="print and (min-width: 8.5in)" +<pre class="brush: html notranslate"><link rel="stylesheet" media="print and (min-width: 8.5in)" href="http://foo.com/mystyle.css" /> </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 class="brush: css notranslate">@media screen and (min-width: 500px) and (max-width: 800px) { ... } </pre> <h2 id="Mozilla-specific_media_features">Mozilla-specific media features</h2> @@ -398,7 +400,7 @@ media_feature: width | min-width | max-width <p>Example:</p> -<pre>@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */ +<pre class="notranslate">@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> @@ -631,8 +633,6 @@ media_feature: width | min-width | max-width <p>[4] <code>tv</code> media type is not supported</p> -<p> </p> - <h2 id="See_also">See also</h2> <ul> diff --git a/files/de/web/css/media_queries/using_media_queries_for_accessibility/index.html b/files/de/web/css/media_queries/using_media_queries_for_accessibility/index.html new file mode 100644 index 0000000000..004ff3a78e --- /dev/null +++ b/files/de/web/css/media_queries/using_media_queries_for_accessibility/index.html @@ -0,0 +1,88 @@ +--- +title: Verwendung von Media Queries für Barrierefreiheit +slug: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility +translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility +--- +<p><strong>Media Queries</strong> can also be used to help users with disabilities understand your website better.</p> + +<h2 id="Reduced_Motion">Reduced Motion</h2> + +<p>Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.</p> + +<p>Also, this method of switching animation off according to the user's preference can also benefit users with low battery or low-end phones or computers.</p> + +<h3 id="Syntax">Syntax</h3> + +<dl> + <dt><code><dfn>no-preference</dfn></code></dt> + <dd>Indicates that the user has made no preference known to the system.</dd> + <dt><code><dfn>reduce</dfn></code></dt> + <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.</dd> +</dl> + +<h3 id="Example">Example</h3> + +<p>This example has an annoying animation unless you turn on Reduce Motion in your accessibility preferences.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div class="animation">animated box</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">.animation { + -webkit-animation: vibrate 0.3s linear infinite both; + animation: vibrate 0.3s linear infinite both; +} + +@media (prefers-reduced-motion: reduce) { + .animation { + animation: none; + } +} +</pre> + +<h2 id="High_Contrast_Mode">High Contrast Mode</h2> + +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>The <strong>-ms-high-contrast</strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">media feature</a> is a <a href="/en-US/docs/Web/CSS/Microsoft_extensions">Microsoft extension</a> that describes whether the application is being displayed in high contrast mode, and with what color variation.</p> + +<p>This will help not only users with low vision and contrast sensitivity issues but also users that are working on a computer or phone with direct sunlight.</p> + +<h3 id="Syntax_2">Syntax</h3> + +<p>The <strong><code>-ms-high-contrast</code></strong> media feature is specified as one of the following values.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>active</code></dt> + <dd> + <p>Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with any color variation.</p> + </dd> + <dt><code>black-on-white</code></dt> + <dd> + <p>Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with a black-on-white color variation.</p> + </dd> + <dt><code>white-on-black</code></dt> + <dd> + <p>Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with a white-on-black color variation.</p> + </dd> +</dl> + +<h3 id="Example_2">Example</h3> + +<p>The following declarations will match applications that are being displayed in high contrast mode with any color variation, a black-on-white color variation, and a white-on-black color variation, respectively.</p> + +<pre class="brush: css notranslate">@media screen and (-ms-high-contrast: active) { + /* All high contrast styling rules */ +} +@media screen and (-ms-high-contrast: black-on-white) { + div { background-image: url('image-bw.png'); } +} +@media screen and (-ms-high-contrast: white-on-black) { + div { background-image: url('image-wb.png'); } +} +</pre> |