any-pointer
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.
any-pointer
は CSS のメディア特性で、ユーザーが (マウスなどの) 何らかのポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べます。
メモ: 第一のポインティングデバイスの正確性を調べたい場合は、代わりに pointer
を使用してください。
構文
例
この例は、精度の高いポインターを持つユーザーには小さなチェックボックスを、精度の低いポインターを持つユーザーには大きなチェックボックスを生成します。大きなチェックボックスは小さなチェックボックスよりも後に宣言されているので優先されます。
HTML
html
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>
CSS
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;
}
}
結果
仕様書
Specification |
---|
Media Queries Level 4 # any-input |
ブラウザーの互換性
BCD tables only load in the browser