From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/@media/any-pointer/index.html | 67 ++++++ files/de/web/css/@media/index.html | 260 +++++++++++++++++++++ files/de/web/css/@media/pointer/index.html | 91 ++++++++ .../css/@media/prefers-reduced-motion/index.html | 23 ++ files/de/web/css/@media/width/index.html | 53 +++++ 5 files changed, 494 insertions(+) create mode 100644 files/de/web/css/@media/any-pointer/index.html create mode 100644 files/de/web/css/@media/index.html create mode 100644 files/de/web/css/@media/pointer/index.html create mode 100644 files/de/web/css/@media/prefers-reduced-motion/index.html create mode 100644 files/de/web/css/@media/width/index.html (limited to 'files/de/web/css/@media') 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}} + +

any-pointer 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.

+ +

Aufgezählte Werte

+ + + + + + + + + + + + + + + + + + + + + + +
WertBedeutung
noneDas Gerät verfügt nicht über ein Zeigegerät.
coarseMindestens ein Eingabemechanismus des Geräts verfügt über ein Zeigegerät von begrenzter Genauigkeit.
fineMindestens ein Eingabemechanismus des Geräts verfügt über ein Zeigegerät von präziser Genauigkeit.
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}{{Spec2('CSS4 Media Queries')}}Added in Media Queries Level 4
+ +

Browser Kompatibilität

+ +{{Compat("css.at-rules.media.any-pointer")}} + +

Siehe auch

+ + 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 +--- +

{{ CSSRef() }}

+ +

Summary

+ +

The @media CSS at-rule associates a set of nested statements, in a CSS block that is delimited by curly braces, with a condition defined by a media query. The @media at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.

+ +

The @media at-rule can be accessed via the CSS object model interface {{domxref("CSSMediaRule")}}.

+ +

Syntax

+ +
{{csssyntax}}
+ +

A <media-query> is composed of a media type and/or a number of media features.

+ +

Media types

+ +
Note: Firefox currently only implements the print and screen media types.  The FullerScreen extension enables support for the projection media type.
+ +
+
all
+
Suitable for all devices.
+
print
+
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.
+
screen
+
Intended primarily for color computer screens.
+
speech
+
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.
+
+ +
Note: CSS2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, aural), but they were deprecated in Media Queries 4 and shouldn't be used.
+ +

Media Features

+ +

Definition. This section needs to be expanded to explain media conditions in more depth.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameSummaryNotes
widthViewport width 
heightViewport height 
aspect-ratioWidth-to-height aspect ratio of the viewport 
orientationOrientation of the viewport 
resolutionPixel density of the output device 
scanScanning process of the output device 
gridIs the device a grid or bitmap? 
update-frequencyHow quickly (if at all) can the output device modify the appearance of the contentAdded in Media Queries Level 4
overflow-blockHow does the output device handle content that overflows the viewport along the block axis?Added in Media Queries Level 4
overflow-inlineCan content that overflows the viewport along the inline axis be scrolled?Added in Media Queries Level 4
colorNumber of bits per color component of the output device, or zero if the device isn't color. 
color-indexNumber of entries in the output device's color lookup table, or zero if the device does not use such a table. 
monochromeBits per pixel in the output device's monochrome frame buffer, or 0 if the device is not monochrome. 
inverted-colorsIs the user agent or underlying OS inverting colors?Added in Media Queries Level 4
pointerIs the primary input mechanism a pointing device, and if so, how accurate is it?Added in Media Queries Level 4
hoverDoes the primary input mechanism allow the user to hover over elements?Added in Media Queries Level 4
any-pointerIs any available input mechanism a pointing device, and if so, how accurate is it? 
any-hoverDoes any available input mechanism allow the user to hover over elements? 
light-levelCurrent ambient light levelAdded in Media Queries Level 4
scriptingIs scripting (e.g. JavaScript) available?Added in Media Queries Level 4
device-width {{obsolete_inline}}Width of the rendering surface of the output deviceDeprecated in Media Queries Level 4
device-height {{obsolete_inline}}Height of the rendering surface of the output deviceDeprecated in Media Queries Level 4
device-aspect-ratio {{obsolete_inline}}Width-to-height aspect ratio of the output deviceDeprecated in Media Queries Level 4
-webkit-device-pixel-ratio {{non-standard_inline}}Number of physical device pixels per CSS pixelNonstandard; WebKit/Blink-specific. If possible, use the resolution media feature instead.
-webkit-transform-3d {{non-standard_inline}}Are CSS 3D {{cssxref("transform")}}s supported?Nonstandard; WebKit/Blink-specific
-webkit-transform-2d {{non-standard_inline}}Are CSS 2D {{cssxref("transform")}}s supported?Nonstandard; WebKit-specific
-webkit-transition {{non-standard_inline}}Are CSS {{cssxref("transition")}}s supported?Nonstandard; WebKit-specific
-webkit-animation {{non-standard_inline}}Are CSS {{cssxref("animation")}}s supported?Nonstandard; WebKit-specific
+ +

Examples

+ +
@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}{{Spec2('CSS3 Conditional')}}Defines the basic syntax of the @media rule.
{{SpecName('CSS4 Media Queries', '#media', '@media')}}{{Spec2('CSS4 Media Queries')}} +

Added scripting, pointer, hover, light-level, update-frequency, overflow-block, and overflow-inline media features.
+ Deprecated all media types except for screen, print, speech, and all.

+
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}{{Spec2('CSS3 Media Queries')}}No change.
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

Browser compatibility

+ +{{Compat("css.at-rules.media")}} + +

See also

+ + 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 +--- +
{{cssref}}
+ +

Das CSS {{cssxref("@media")}} media Merkmal pointer 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.

+ +

Syntax

+ +

Die Einstellungsmöglichkeiten für das Merkmal pointer  sind in der folgenden Liste aufge

+ +
+
none
+
Das Gerät verfügt nur über Tastatur
+
coarse
+
Das Gerät verfügt über ein Eingabegerät mit limitierter Präzision (z.B. Touch)
+
fine
+
Das Gerät verfügt über einen sehr präzises Eingabegerät (z.B. Maus, Touchpad, Stift)
+
+ +

Beispiel

+ +

HTML

+ +
<input id="test" type="checkbox" />
+<label for="test">Look at me!</label>
+ +

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;
+  }
+}
+ +

Result

+ +

{{EmbedLiveSample("Example")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}{{Spec2('CSS4 Media Queries')}}Initial definition.
+ +

Browser Kompatibilität

+ + + +

{{Compat("css.at-rules.media.pointer")}}

+ +

See also

+ + 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 +--- +

Das prefers-reduced-motion CSS media feature wird genutzt um zu erkennen ob der Nutzer angefragt hat, dass das System die Menge an nicht notwendiger Bewegung minimiert.

+ +

User preferences

+ + + +

Browser Kompatibilität

+ + + +

{{Compat("css.at-rules.media.prefers-reduced-motion")}}

+ +

+ +
{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}
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 +--- +

{{cssref}}

+ +

width ist eine CSS Medien-Eigenschaft, die verwendet werden kann um Stile basierend auf der Breite der Anzeige (Viewport) zuzuordnen. Die Breite muss als {{cssxref("<length>")}} Wert definiert werden.

+ +

Syntax

+ +

width ist ein Breichswert, d.h. min-width und max-width sind ebenfalls verfügbar.

+ +
/* Exakte Breite */
+@media (width: 300px) {}
+
+/* Viewport Minimale Breite */
+@media (min-width: 50em) {}
+
+/* Viewport Maximale Breite */
+@media (max-width: 1000px) {}
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Media Queries', '#media', '@media')}}{{Spec2('CSS4 Media Queries')}}Keine Änderung.
{{SpecName('CSS3 Media Queries', '#width', 'width')}}{{Spec2('CSS3 Media Queries')}}Initiale Definition.
+ +

Browserkompatibilität

+ +{{Compat("css.at-rules.media.width")}} -- cgit v1.2.3-54-g00ecf