any-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 any-pointer CSS Medienabfrageeigenschaft 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
Die any-pointer Eigenschaft 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 dann zutrifft, wenn keines von ihnen ein Zeigegerät ist.
Beispiele
Dieses Beispiel erstellt ein kleines Kontrollkästchen für Benutzer mit mindestens einem genauen 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 wird.
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
| Specification |
|---|
| Media Queries Level 4 # any-input |
Browser-Kompatibilität
BCD tables only load in the browser