any-hoverというメディア特性を知らなかったので調べた
any-hover は CSS のメディア特性で、要素の上で停止することができる入力メカニズムが何らか利用できるかどうかを検査するために使用することができます。
mdnのドキュメントはよくわからなかったのだが、以下のブログを読んだらわかった
例えば、スマホなどのタップデバイスではhoverが意味ないので、スマホなどではhoverの指定を無効化したい
その時に、このメディア特性を使うと良いみたい
@media (any-hover: hover) { .button:hover { background-color: var(--background-hover); } }
確かに、スマホでhoverにスタイルあててるボタンが、たまにUIがおかしい時があったりするのでつけるのが良さそう
