pointer CSS Medienfunktion

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

Syntax

Die pointer-Funktion wird als Schlüsselwortwert angegeben, der aus der untenstehenden 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 ein 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 grober primärer Zeigegerätgenauigkeit.

HTML

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

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

Browser-Kompatibilität

Siehe auch

• Die any-pointer Medienfunktion