hoverとfocus-visible

どうも、くまだです。

hoverとfocus-visibleをセットで使うメモ。

hoverとfocus-visible

ホバースタイルがあるコンポーネントやパーツは、以下のようにhoverとfocus-visibleをセットで指定しておく。

<button class="c-button">ボタン</button>

.c-button {
    --hover-bg: red;

    inline-size: 200px;
    padding-block: 20px;
    padding-inline: 10px;
    background-color: orange;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

@media (any-hover: hover) {
    .c-button:hover {
        background-color: var(--hover-bg);
    }
}

.c-button:focus-visible {
    background-color: var(--hover-bg);
}

any-hover:hoverは、ホバーが利用できるデバイスかそうでないか判定を行うCSSのメディアクエリです。タブレットやスマホは通常タップ操作なので適用されませんが、例えばホバー操作が可能なマウスやタッチパッドが接続された場合は、any-hoverのスタイルが適用されるようになります。

focus-visibleも同様に指定し、キーボード操作時にもホバースタイルと同様のスタイルをフォーカス時に確認できるようにします。フォーカス時のスタイルがないと、キーボード操作時にフォーカスがどこに当たっているか確認できないため、いっしょに指定しています。

ここまで読んでくださりありがとうございました。