【CSS Modules】any-hoverメディア機能の使い方

any-hover定数は、ユーザーが使用しているポインティングデバイスが、要素の上にカーソルなどをホバーさせる（重ねる）能力を持っているかを表す定数です。これはCSSのメディア特性の一つであり、特にレスポンシブデザインにおいて、デバイスの入力方法に応じたスタイルを適用するために利用されます。

たとえば、マウスやトラックパッドのように正確なカーソル操作が可能で、要素の上にホバーしてツールチップを表示したり、メニューを展開したりできるデバイスでは、any-hover定数は「hover」の状態を示します。一方で、指で直接画面を操作するタッチスクリーンデバイスのように、ホバーという概念が存在しないか、非常に限定的なデバイスでは、「none」の状態を示します。

この特性を使用することで、開発者はホバー機能が利用可能なデバイス向けには、ホバー時のスタイル変化（例：ボタンの色が変わる）を設定し、ホバー機能がないデバイス向けには、そうしたスタイルを適用しない、または別の視覚的なフィードバックを提供するなど、より適切なユーザー体験を提供できます。メディアクエリ (any-hover: hover) を使って、デバイスがホバー能力を持つ場合にのみ適用されるCSSルールを記述することが可能です。これにより、多様なデバイス環境に適応した、柔軟でアクセシブルなウェブサイトの構築に貢献します。

Copy
1@media (any-hover: hover) {
2  .my-element {
3    background-color: #f0f0f0;
4  }
5}
6
7@media (any-hover: none) {
8  .my-element {
9    cursor: default;
10  }
11}

引数なし

引数はありません

戻り値なし

戻り値はありません