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.
Die pointer-CSS-Medienfunktion prüft, ob der Benutzer ein Zeigegerät (wie eine Maus) hat, und wenn ja, wie genau das primäre Zeigegerät ist.
Hinweis:
Wenn Sie die Genauigkeit irgendeines Zeigegeräts testen möchten, verwenden Sie stattdessen any-pointer.
Syntax
Die pointer-Funktion wird als ein Schlüsselwortwert aus der unten stehenden Liste angegeben.
Beispiele
Dieses Beispiel erstellt ein kleines Kontrollkästchen für Benutzer mit feinen 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
| Spezifikation |
|---|
| Media Queries Level 4 # pointer |