any-pointer CSS-Media-Feature
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.
Die any-pointer CSS Media-Feature überprüft, ob der Benutzer ein beliebiges 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 ein 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. none trifft jedoch nur zu, wenn keines der Geräte 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
| Spezifikation |
|---|
| Media Queries Level 4 # any-input |