TailwindCSSのドキュメントを確認していて見つけたプロパティでした。
調べてみたら、そんなことができるのか！とこれまで微妙だと思っていたことが解決できるものでした！
そんなの聞いたことない！って人はサクッと読めるのでぜひ一読していってください！
any-hoverってなんだ？
MDNでは下記のように説明されています。
any-hover は CSS のメディア特性で、要素の上で停止することができる入力メカニズムが何らか利用できるかどうかを検査するために使用することができます。
よくわかりません…。
1つずつ紐解きます。
【メディア特性について】
メディア特性は、ユーザーエージェント、出力装置、環境の特徴のことです。
次にわからないのがこの部分。
要素の上で停止することができる入力メカニズムが何らか利用できるかどうかを検査するために使用する
メディア特性のページのもう少しわかりやすい表現で書かれてました。
入力メカニズムで、要素上でのホバーをユーザーが使用できるものがあるか。
要するにユーザーエージェントでホバーが機能するか？をチェックするためのメディア特性です！
ブラウザの対応状況は問題なさそうです！
any-hoverはいつ使うの？
筆者がこれまで微妙だと思っていたのは、hoverできない端末でもhoverが有効になってしまっていること…でした。
any-hoverはこの微妙な点を改善してくれます！
下記のように指定することで実現できます。
@media (any-hover: hover) {
a:hover {
background: yellow;
}
}
ちなみにhover: hoverというの記述方法も存在します。
| メディア特性 | 説明 |
|---|---|
@media (hover: hover) |
入力デバイスがhoverに対応している場合に適用する |
@media (any-hover: hover) |
入力デバイスのいずれかにhoverに対応している場合に適用する |
any-hoverについては下記の記事わかりやすく、非常に参考になりました！
紹介した2つの記事内にも書かれていたことですが、予期せぬUIの振る舞いの発生を防ぐためany-hoverを利用する意味がありそうです！
まとめ
本件に限ったことではありませんが、暗黙的、内部仕様で設定されているものは見えづらくエラーの原因に気が付きにくくなります…。
ライブラリやフレームワークも内部的に依存しているライブラリがあるので利用時には把握しておきたいですね！
どこまで対応するのかは難しいところですが、できる限り明示的に所作を指定してやることが予期せぬ表示を防ぐことにつながるのだと改めて思いました。