initial commit

5 files changed, 494 insertions, 0 deletions

diff --git a/files/de/web/css/@media/any-pointer/index.html b/files/de/web/css/@media/any-pointer/index.html
new file mode 100644
index 0000000000..d919a97c58
--- /dev/null
+++ b/files/de/web/css/@media/any-pointer/index.html
@@ -0,0 +1,67 @@
+---
+title: any-pointer
+slug: Web/CSS/@media/any-pointer
+tags:
+  - CSS
+  - NeedsBrowserCompatibility
+  - NeedsExample
+  - Referenz
+translation_of: Web/CSS/@media/any-pointer
+---
+{{cssref}}
+
+<p><strong><code>any-pointer</code></strong> ist ein CSS Media Feature, das dazu verwendet werden kann, um zu prüfen, ob irgendein verfügbarer Eingabemechanismus ein Zeigegerät ist, und falls ja, wie genau es ist.</p>
+
+<h2 id="Aufgezählte_Werte">Aufgezählte Werte</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th>Wert</th>
+   <th>Bedeutung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>none</code></td>
+   <td>Das Gerät verfügt nicht über ein Zeigegerät.</td>
+  </tr>
+  <tr>
+   <td><code>coarse</code></td>
+   <td>Mindestens ein Eingabemechanismus des Geräts verfügt über ein Zeigegerät von begrenzter Genauigkeit.</td>
+  </tr>
+  <tr>
+   <td><code>fine</code></td>
+   <td>Mindestens ein Eingabemechanismus des Geräts verfügt über ein Zeigegerät von präziser Genauigkeit.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.at-rules.media.any-pointer")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/@media/pointer">das <code>pointer</code> Media Feature</a></li>
+</ul>
diff --git a/files/de/web/css/@media/index.html b/files/de/web/css/@media/index.html
new file mode 100644
index 0000000000..814ff628ed
--- /dev/null
+++ b/files/de/web/css/@media/index.html
@@ -0,0 +1,260 @@
+---
+title: '@media'
+slug: Web/CSS/@media
+tags:
+  - At-rule
+  - CSS
+  - Layout
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+translation_of: Web/CSS/@media
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The <code>@media</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> associates a set of nested statements, in a CSS block that is delimited by curly braces, with a condition defined by a <a href="/en/CSS/Media_queries" title="CSS media queries">media query</a>. The <code>@media</code> at-rule may be used not only at the top level of a CSS, but also inside any <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a>.</p>
+
+<p>The <code>@media</code> at-rule can be accessed via the CSS object model interface {{domxref("CSSMediaRule")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<p>A <code>&lt;media-query&gt;</code> is composed of a media type and/or a number of media features.</p>
+
+<h2 id="Media_types" name="Media_types">Media types</h2>
+
+<div class="note"><strong>Note:</strong> Firefox currently only implements the <code>print</code> and <code>screen</code> media types.  The <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/4650" title="https://addons.mozilla.org/en-US/firefox/addon/4650">FullerScreen</a> extension enables support for the <code>projection</code> media type.</div>
+
+<dl>
+ <dt>all</dt>
+ <dd>Suitable for all devices.</dd>
+ <dt>print</dt>
+ <dd>Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on <a href="/en/CSS/Paged_Media" title="https://developer.mozilla.org/en/CSS/Paged_Media">paged media</a>, and the <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">media section of the Getting Started tutorial</a> for information about formatting issues that are specific to paged media.</dd>
+ <dt>screen</dt>
+ <dd>Intended primarily for color computer screens.</dd>
+ <dt>speech</dt>
+ <dd>Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> CSS2.1 and Media Queries 3 defined several additional media types (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>), but they were deprecated in <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> and shouldn't be used.</div>
+
+<h2 id="Media_features" name="Media_features">Media Features</h2>
+
+<p><a href="http://dev.w3.org/csswg/mediaqueries/#mq-features">Definition</a>. This section needs to be expanded to explain media conditions in more depth.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>Name</th>
+   <th>Summary</th>
+   <th>Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/width"><code>width</code></a></td>
+   <td>Viewport width</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/height"><code>height</code></a></td>
+   <td>Viewport height</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/aspect-ratio"><code>aspect-ratio</code></a></td>
+   <td>Width-to-height aspect ratio of the viewport</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/orientation"><code>orientation</code></a></td>
+   <td>Orientation of the viewport</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a></td>
+   <td>Pixel density of the output device</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/scan"><code>scan</code></a></td>
+   <td>Scanning process of the output device</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/grid"><code>grid</code></a></td>
+   <td>Is the device a grid or bitmap?</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/update-frequency"><code>update-frequency</code></a></td>
+   <td>How quickly (if at all) can the output device modify the appearance of the content</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/overflow-block"><code>overflow-block</code></a></td>
+   <td>How does the output device handle content that overflows the viewport along the block axis?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/overflow-inline"><code>overflow-inline</code></a></td>
+   <td>Can content that overflows the viewport along the inline axis be scrolled?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/color"><code>color</code></a></td>
+   <td>Number of bits per color component of the output device, or zero if the device isn't color.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/color-index"><code>color-index</code></a></td>
+   <td>Number of entries in the output device's color lookup table, or zero if the device does not use such a table.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/monochrome"><code>monochrome</code></a></td>
+   <td>Bits per pixel in the output device's monochrome frame buffer, or 0 if the device is not monochrome.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/inverted-colors"><code>inverted-colors</code></a></td>
+   <td>Is the user agent or underlying OS inverting colors?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code></a></td>
+   <td>Is the primary input mechanism a pointing device, and if so, how accurate is it?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/hover"><code>hover</code></a></td>
+   <td>Does the primary input mechanism allow the user to hover over elements?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/any-pointer"><code>any-pointer</code></a></td>
+   <td>Is any available input mechanism a pointing device, and if so, how accurate is it?</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/any-hover"><code>any-hover</code></a></td>
+   <td>Does any available input mechanism allow the user to hover over elements?</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/light-level"><code>light-level</code></a></td>
+   <td>Current ambient light level</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/scripting"><code>scripting</code></a></td>
+   <td>Is scripting (e.g. JavaScript) available?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-width"><code>device-width</code></a> {{obsolete_inline}}</td>
+   <td>Width of the rendering surface of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-height"><code>device-height</code></a> {{obsolete_inline}}</td>
+   <td>Height of the rendering surface of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-aspect-ratio"><code>device-aspect-ratio</code></a> {{obsolete_inline}}</td>
+   <td>Width-to-height aspect ratio of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio"><code>-webkit-device-pixel-ratio</code></a> {{non-standard_inline}}</td>
+   <td>Number of physical device pixels per CSS pixel</td>
+   <td>Nonstandard; WebKit/Blink-specific. If possible, use the <a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a> media feature instead.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-3d"><code>-webkit-transform-3d</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS 3D {{cssxref("transform")}}s supported?</td>
+   <td>Nonstandard; WebKit/Blink-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-2d"><code>-webkit-transform-2d</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS 2D {{cssxref("transform")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS {{cssxref("transition")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS {{cssxref("animation")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<pre class="brush: css">@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Defines the basic syntax of the <code>@media</code> rule.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>
+    <p>Added <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>light-level</code>, <code>update-frequency</code>, <code>overflow-block</code>, and <code>overflow-inline</code> media features.<br>
+     Deprecated all media types except for <code>screen</code>, <code>print</code>, <code>speech</code>, and <code>all</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+{{Compat("css.at-rules.media")}}
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Media queries</a></li>
+ <li>The CSSOM {{ domxref("CSSMediaRule") }} associated with this at-rule.</li>
+</ul>
diff --git a/files/de/web/css/@media/pointer/index.html b/files/de/web/css/@media/pointer/index.html
new file mode 100644
index 0000000000..4c1ff0fc8b
--- /dev/null
+++ b/files/de/web/css/@media/pointer/index.html
@@ -0,0 +1,91 @@
+---
+title: pointer
+slug: Web/CSS/@media/pointer
+translation_of: Web/CSS/@media/pointer
+---
+<div>{{cssref}}</div>
+
+<p>Das <a href="/en-US/docs/CSS">CSS</a> {{cssxref("@media")}} media Merkmal <strong><code>pointer</code></strong> wird verwendet um Styles abhängig vom primären Eingabemechanismus des Geräts anzuwenden. Es gibt aufschluss darüber ob der primäre Eingabemechanismus ein Zeigegerät ist, und wenn ja, wie präzise es ist.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Die Einstellungsmöglichkeiten für das Merkmal <code>pointer</code>  sind in der folgenden Liste aufge</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Das Gerät verfügt nur über Tastatur</dd>
+ <dt><code>coarse</code></dt>
+ <dd>Das Gerät verfügt über ein Eingabegerät mit limitierter Präzision (z.B. Touch)</dd>
+ <dt><code>fine</code></dt>
+ <dd>Das Gerät verfügt über einen sehr präzises Eingabegerät (z.B. Maus, Touchpad, Stift)</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input id="test" type="checkbox" /&gt;
+&lt;label for="test"&gt;Look at me!&lt;/label&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.pointer")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/@media/any-pointer">the <code>any-pointer</code> media feature</a></li>
+</ul>
diff --git a/files/de/web/css/@media/prefers-reduced-motion/index.html b/files/de/web/css/@media/prefers-reduced-motion/index.html
new file mode 100644
index 0000000000..84c9382a27
--- /dev/null
+++ b/files/de/web/css/@media/prefers-reduced-motion/index.html
@@ -0,0 +1,23 @@
+---
+title: prefers-reduced-motion
+slug: Web/CSS/@media/prefers-reduced-motion
+translation_of: Web/CSS/@media/prefers-reduced-motion
+---
+<p>Das <strong><code>prefers-reduced-motion</code></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> wird genutzt um zu erkennen ob der Nutzer angefragt hat, dass das System die Menge an nicht notwendiger Bewegung minimiert.</p>
+
+<h2 id="User_preferences">User preferences</h2>
+
+<ul>
+ <li>Unter Windows 10: Einstellungen &gt; Erleichterte Bedienung &gt; Anzeige &gt; Animationen in Windows anzeigen</li>
+ <li>In Firefox <code>about:config</code>: Füge eine Binär-Präferenz ("Number") namens <code>ui.prefersReducedMotion</code> hinzu und setze deren Wert auf <code>1</code>. Änderung an dieser Präferenz werden sofort übernommen.</li>
+</ul>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.prefers-reduced-motion")}}</p>
+
+<h2 id="sect1"></h2>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}</div>
diff --git a/files/de/web/css/@media/width/index.html b/files/de/web/css/@media/width/index.html
new file mode 100644
index 0000000000..7f25285f3e
--- /dev/null
+++ b/files/de/web/css/@media/width/index.html
@@ -0,0 +1,53 @@
+---
+title: width
+slug: Web/CSS/@media/width
+tags:
+  - CSS
+  - Referenz
+translation_of: Web/CSS/@media/width
+---
+<p>{{cssref}}</p>
+
+<p><strong><code>width</code></strong> ist eine <a href="/de/docs/Web/CSS">CSS</a> Medien-Eigenschaft, die verwendet werden kann um Stile basierend auf der Breite der Anzeige (Viewport) zuzuordnen. Die Breite muss als {{cssxref("&lt;length&gt;")}} Wert definiert werden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p><strong><code>width</code></strong> ist ein Breichswert, d.h. <strong><code>min-width</code></strong> und <strong>max-width</strong> sind ebenfalls verfügbar.</p>
+
+<pre class="brush: css">/* Exakte Breite */
+@media (width: 300px) {}
+
+/* Viewport Minimale Breite */
+@media (min-width: 50em) {}
+
+/* Viewport Maximale Breite */
+@media (max-width: 1000px) {}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Keine Änderung.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+{{Compat("css.at-rules.media.width")}}