CSSscripting メディア特性は、ユーザーが (マウスなどの) 何かのポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べるために使用することができます。

メモ: 第一のポインティングデバイスの正確性を調べたい場合は、代わりに 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 の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 41Edge 完全対応 12Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1035774.
IE 未対応 なしOpera 完全対応 28Safari 完全対応 9WebView Android 完全対応 41Chrome Android 完全対応 41Edge Mobile 完全対応 12Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1035774.
Opera Android 完全対応 28Safari iOS 完全対応 9.2Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,