pointer

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.

Die pointer CSS Media-Feature überprüft, ob der Benutzer ein Zeigegerät (wie eine Maus) hat, und falls ja, wie genau das primäre Zeigegerät ist.

Hinweis: Wenn Sie die Genauigkeit eines beliebigen Zeigegeräts testen möchten, verwenden Sie stattdessen any-pointer.

Syntax

Das pointer-Feature wird als Schlüsselwortwert angegeben, das aus der folgenden Liste ausgewählt wird.

none

Der primäre Eingabemechanismus umfasst kein Zeigegerät.

coarse

Der primäre Eingabemechanismus umfasst ein Zeigegerät mit begrenzter Genauigkeit, wie einen Finger auf einem Touchscreen.

fine

Der primäre Eingabemechanismus umfasst ein genaues Zeigegerät, wie eine Maus.

Beispiele

Dieses Beispiel erstellt ein kleines Kontrollkästchen für Benutzer mit präzisen primären Zeigegeräten und ein großes Kontrollkästchen für Benutzer mit groben primären Zeigegeräten.

HTML

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

CSS

css
input[type="checkbox"] {
  appearance: none;
  border: solid;
  margin: 0;
}

input[type="checkbox"]:checked {
  background: gray;
}

@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border-width: 1px;
    border-color: blue;
  }
}

@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
    border-width: 2px;
    border-color: red;
  }
}

Ergebnis

Spezifikationen

Specification
Media Queries Level 4
# pointer

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch