Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
メディアクエリ Widely available

Interaction media queries

ユーザーの入力デバイスの精度やホバー機能に応じてスタイルを調整するメディアクエリです。タッチデバイスではタップターゲットを大きくし、マウス操作ではホバーエフェクトを表示するといった最適化が可能です。デバイスの種類を画面サイズだけでなく操作方法で判別できます。

入力デバイスメディアクエリ

概要

ユーザーの入力デバイスの精度やホバー機能に応じてスタイルを調整するメディアクエリです。タッチデバイスではタップターゲットを大きくし、マウス操作ではホバーエフェクトを表示するといった最適化が可能です。デバイスの種類を画面サイズだけでなく操作方法で判別できます。

対応ブラウザ

デスクトップ

Chrome 41+
Edge 12+
Safari 9+
Firefox 64+

モバイル

Chrome Android 41+
Safari iOS 9+
Firefox Android 64+

基本構文

CSS 
@media (hover: none) {
  .tooltip { display: none; }
}
@media (pointer: coarse) {
  button { min-height: 44px; }
}

実務での使いどころ

  • タッチデバイス向けUIの最適化

    pointer: coarseのデバイスでタップターゲットを拡大し、hover: noneの場合はホバーに依存しないインタラクションに切り替えます。

注意点

  • タッチ対応のラップトップなど、複数の入力手段を持つデバイスではany-pointerやany-hoverの方が適切な場合があります。

アクセシビリティ

  • ホバーが利用できない環境でもすべての機能にアクセスできるよう、hover: noneの場合の代替インタラクションを提供してください。

参考リンク