pointer
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Dezember 2018.
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
| Specification |
|---|
| Media Queries Level 4 # pointer |
Browser-Kompatibilität
Loading…