このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
any-pointer
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2018年12月以降、すべてのブラウザーで利用可能です。
any-pointer は CSS のメディア特性で、ユーザーが (マウスなどの) 何らかのポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べます。
メモ:
第一のポインティングデバイスの正確性を調べたい場合は、代わりに pointer を使用してください。
構文
any-pointer 特性は、以下の一覧の中から一つのキーワード値で指定します。
none-
利用できるポインティングデバイスがありません。
coarse-
正確性が限定されたポインティングデバイスが、少なくとも一つ含まれています。
fine-
正確性が高いポインティングデバイスが、少なくとも一つ含まれています。
メモ:
異なる性質を持つ複数の機器が利用できる場合は、複数の値に一致することがありますが、 none はポインティングデバイスがない場合のみ一致します。
例
この例は、精度の高いポインターを持つユーザーには小さなチェックボックスを、精度の低いポインターを持つユーザーには大きなチェックボックスを生成します。大きなチェックボックスは小さなチェックボックスよりも後に宣言されているので優先されます。
HTML
html
<input id="test" type="checkbox" /> <label for="test">こちらを見て!</label>
CSS
css
input[type="checkbox"]:checked {
background: gray;
}
@media (any-pointer: fine) {
input[type="checkbox"] {
appearance: none;
width: 15px;
height: 15px;
border: 1px solid blue;
}
}
@media (any-pointer: coarse) {
input[type="checkbox"] {
appearance: none;
width: 30px;
height: 30px;
border: 2px solid red;
}
}
結果
[フレーム]
仕様書
| 仕様書 |
|---|
| Media Queries Level 4 # any-input |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。