CSSpointer メディア特性は、ユーザーが(マウスなどの)ポインティングデバイスを持っているか、もしそうならば、主要なポインティングデバイスにどれだけの正確性があるかを調べます。

メモ: すべてのポインティングデバイスの正確性を調べたい場合は、代わりに any-pointer を使用してください。

構文

pointer 特性は、以下の一覧の中から一つのキーワード値で指定します。

none
主要な入力メカニズムに、ポインティングデバイスがありません。
coarse
主要な入力メカニズムにポインティングデバイスがありますが、その正確性が限定されています。
fine
主要な入力メカニズムにポインティングデバイスがあり、正確性も高いです。

次の例は、主要なポインティングデバイスの正確性によって、チェックボックスの大きさを変更しています。正確性が高い場合は小さく、低い場合は大きくなります。

HTML

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

CSS

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

結果

仕様書

仕様書 状態 備考
Media Queries Level 4
pointer の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
pointer media featureChrome 完全対応 41Edge 完全対応 12Firefox 完全対応 64IE 未対応 なしOpera 完全対応 28Safari 完全対応 9WebView Android 完全対応 41Chrome Android 完全対応 50Firefox Android 完全対応 64Opera Android 完全対応 28Safari iOS 完全対応 9.2Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報

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

このページの貢献者: mdnwebdocs-bot, myakura, mfuji09, mpcjazz
最終更新者: mdnwebdocs-bot,