pointer

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.

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)

<input id="test" type="checkbox" />
<label for="test">Look at me!</label>

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;
  }
}

• the any-pointer media feature