こんにちは、カブラハブリテス！
サイトのアダプティブバージョンを作成するとき、ユーザーのブラウザーがホバーをサポートしているかどうかを知る必要がある場合がよくあります。 たとえば、サブメニューをホバーするときのドロップダウン、またはホバーイベントに関連付けられたさまざまなアニメーション-これらはすべてPCでのみ必要です。 タッチデバイスでは、要素の動作を変更する必要があります。 では、CSSでホバーをサポートするデバイスにのみ特定のスタイルを設定し、ブラウザー間の互換性を忘れないようにするにはどうすればよいでしょうか？
最初に、この問題を解決するModernizr jsライブラリがあることをすぐに言いたいと思います。 しかし...私の意見では、CSSで単一のメディアリクエストを作成する代わりに、ホバーサポートを決定するためだけにこのライブラリをねじ込むことは最善の選択肢ではありません。
しかし、メディアクエリではそれほど簡単ではありません。 どんなオプションがあるのか見てみましょう！
1. メディア （ホバー）
div{color:red;} @media (hover){ /* hover*/ div{color:green;} }
このメディアクエリを使用すると、ホバーがサポートされているデバイスに対してのみスタイルを個別に指定できます。 しかし、ブラウザのサポートを見てみましょう： caniuse.com/#feat=css-media-interaction
ご覧のとおり、IEおよびFirefoxではサポートされていません。 つまり 私たちのコードは、これらのブラウザをホバーサポートなしとして認識します。 このオプションは私たちには適していません！
2. メディア （ポインター：粗い）
div{color:green;} @media (pointer:coarse){ /*touch-*/ div{color:red;} }
このクエリはまったく逆に機能します。 タッチデバイスのみ。 サポートはメディア （ホバー）と同じですが、 IEとFirefoxはPCのブラウザです-このメディアリクエストはいずれにしても動作しません。
このソリューションは、タッチデバイス専用のスタイルを規定する必要がある場合に非常に適しています。 しかし基本的に、タスクはホバー専用のスタイルを規定することです。 これは、最初にすべてのブラウザーのスタイルを作成し、メディア要求でスタイルをリセットする必要があることを意味します。 これはコードを増やすだけでなく、むしろ不便です。 要素のホバーイベント中に変更された各プロパティを複製する必要があります。
3. メディア （ホバー）+
上記の2つのオプションから選択すると、最初のオプションが最も魅力的です。 より多くのブラウザのサポートがあるでしょう...
しかし、幸いなことに、特定のブラウザーでのみサポートされているメディアクエリがいくつかあります。 このサイトでそのようなサポートの特異性を見つけることができます。
したがって、このコードはIEでのみ機能します。
@media (min-width:0\0) {}
そして、このメディアクエリはFirefoxでのみ機能します。
@media (min--moz-device-pixel-ratio:0) {}
それでは、3つのクエリすべてを結合しましょう！
div{color:red;} @media (hover) , (min-width:0\0) , (min--moz-device-pixel-ratio:0){ /* hover*/ div{color:green;} }
その結果、ホバーサポートによってトリガーされるユニバーサルメディアクエリを取得します。
この要求はすべての主要なブラウザーでサポートされており、ボーナスとして、BlackberryおよびOpera Miniで正常に機能します（オプション2には該当しませんでした）。
3つのアプローチを比較するデモ。 緑=ホバーサポート：