any-pointer
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2018 browserübergreifend verfügbar.
Das any-pointer CSS Medienmerkmal prüft, ob der Benutzer irgendein Zeigegerät (wie eine Maus) hat und, falls ja, wie genau es ist.
Hinweis:
Wenn Sie die Genauigkeit des primären Zeigegeräts testen möchten, verwenden Sie stattdessen pointer.
Syntax
Das Merkmal any-pointer wird als Schlüsselwortwert angegeben, der aus der folgenden Liste ausgewählt wird.
none-
Kein Zeigegerät ist verfügbar.
coarse-
Mindestens ein Eingabemechanismus umfasst ein Zeigegerät mit begrenzter Genauigkeit.
fine-
Mindestens ein Eingabemechanismus umfasst ein genaues Zeigegerät.
Hinweis:
Mehr als ein Wert kann zutreffen, wenn die verfügbaren Geräte unterschiedliche Eigenschaften haben, obwohl none nur zutrifft, wenn keines von ihnen ein Zeigegerät ist.
Beispiele
Dieses Beispiel erstellt ein kleines Kontrollkästchen für Benutzer mit mindestens einem feinen Zeiger und ein großes Kontrollkästchen für Benutzer mit mindestens einem groben Zeiger. Das große Kontrollkästchen hat Vorrang, da es nach dem kleinen deklariert ist.
HTML
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>
CSS
input[type="checkbox"]:checked {
background: gray;
}
@media (any-pointer: fine) {
input[type="checkbox"] {
appearance: none;
width: 15px;
height: 15px;
border: 1px solid blue;
}
}
@media (any-pointer: coarse) {
input[type="checkbox"] {
appearance: none;
width: 30px;
height: 30px;
border: 2px solid red;
}
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Media Queries Level 4 # any-input |