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/pointer/index.html | 91 ++++++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 files/de/web/css/@media/pointer/index.html (limited to 'files/de/web/css/@media/pointer/index.html') 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

+ + -- cgit v1.2.3-54-g00ecf