any-pointer
CSS の any-pointer
メディア特性は、ユーザーが (マウスなどの) 何かのポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べるために使用することができます。
メモ: 第一のポインティングデバイスの正確性を調べたい場合は、代わりに pointer
を使用してください。
構文
any-pointer
特性は、以下の一覧の中から一つのキーワード値で指定します。
none
- 利用できるポインティングデバイスがありません。
coarse
- 正確性が限定されたポインティングデバイスが、少なくとも一つ含まれています。
fine
- 正確性が高いポインティングデバイスが、少なくとも一つ含まれています。
メモ: 異なる性質を持つ複数の機器が利用できる場合は、複数の値に一致することがありますが、 none
はポインティングデバイスがない場合のみ一致します。
例
この例は、精度の高いポインターを持つユーザーには小さなチェックボックスを、粗いポインターを持つユーザーには大きなチェックボックスを生成します。
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"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border: 1px solid blue;
}
}
@media (any-pointer: coarse) {
input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
border: 2px solid red;
}
}
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
Media Queries Level 4 any-pointer の定義 |
勧告候補 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。