Das CSS @media
media Merkmal pointer
wird verwendet um Styles abhängig vom primären Eingabemechanismus des Geräts anzuwenden. Es gibt aufschluss darüber ob der primäre Eingabemechanismus ein Zeigegerät ist, und wenn ja, wie präzise es ist.
Syntax
Die Einstellungsmöglichkeiten für das Merkmal pointer
sind in der folgenden Liste aufge
none
- Das Gerät verfügt nur über Tastatur
coarse
- Das Gerät verfügt über ein Eingabegerät mit limitierter Präzision (z.B. Touch)
fine
- Das Gerät verfügt über einen sehr präzises Eingabegerät (z.B. Maus, Touchpad, Stift)
Beispiel
HTML
<input id="test" type="checkbox" />
<label for="test">Look at me!</label>
CSS
input[type="checkbox"]:checked {
background: gray;
}
@media (pointer: fine) {
input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border: 1px solid blue;
}
}
@media (pointer: coarse) {
input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
border: 2px solid red;
}
}
Result
Spezifikationen
Specification | Status | Comment |
---|---|---|
Media Queries Level 4 Die Definition von 'pointer' in dieser Spezifikation. |
Anwärter Empfehlung | Initial definition. |
Browser Kompatibilität
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.