@media(hover: hover)and (prefers-reduced-motion)

@mediaクエリは、異なるデバイスや環境に応じてCSSを適用するための方法です。具体的には、ユーザーがインターフェースとどのように相互作用するか（ホバーの有無）や、ユーザーのアクセシビリティ設定（動きの軽減を好むかどうか）に基づいてスタイルを変更できます。

@media (hover: hover) and (prefers-reduced-motion)は、以下の条件を満たすデバイスに適用されます。

  1. hover: hover:

    • デバイスがホバー（マウスオーバー）をサポートしている。
    • 例えば、マウスを持つデスクトップやラップトップなど。

  2. prefers-reduced-motion:

    • ユーザーが「動きの軽減」を設定している。
    • これは、ユーザーが多くの動きやアニメーションを好まない、もしくは避けたいと考えていることを示します。例えば、OSのアクセシビリティ設定で「動きを減らす」がオンになっている場合です。

このメディアクエリを使用することで、ホバーが可能なデバイスかつ動きの軽減を希望するユーザーに対して特定のスタイルを適用できます。

例: @media (hover: hover) and (prefers-reduced-motion)

以下は、上記のメディアクエリを使用した例です。

css
/* デフォルトのスタイル */
button {
  transition: transform 0.3s ease;
}

/* ホバー可能かつ動きを軽減する設定のユーザー向けのスタイル */
@media (hover: hover) and (prefers-reduced-motion) {
  button {
    /* 動きの軽減のため、ホバー時のトランジションを削除 */
    transition: none;
  }
}

この例では、ボタンに対してデフォルトではtransformプロパティにトランジションが適用されていますが、ホバー可能なデバイスかつ動きを軽減する設定が有効な場合、トランジションを削除します。

まとめ

@media (hover: hover) and (prefers-reduced-motion)は、ユーザーのインタラクション方法とアクセシビリティ設定に基づいてスタイルを適用するための強力なツールです。このメディアクエリを活用することで、よりアクセシブルで使いやすいインターフェースを提供できます。

未分類

Posted by ぼっち