最近便利なCSSおれおれAdvent Calendar 2023 – 15 日目
メディアクエリーを使って切り替える場合ってだいたい画面の幅を見て、広ければパソコン、狭ければスマホ、という判断にしていることが多いかと思います。中間にタブレットを置いたり。
大きさとか配置とかはそれでもまあまあ大丈夫かなとは思うんですが、ユーザー操作(インタラクション)を考えると画面幅に依存するのは本質ではないなあという感じがしますよね。デバイスの特性を見てやりましょう。
例
ホバーで色を変えて強調表示するカード UI です。スマホ等で入力欄に触れるとホバー状態にしても反応してしまうのを制御できます。
.Card { @media (hover: none) { &:hover { background-color: #999; } } }
ホバー状態にするべきかせぬべきかは迷うけど。する道を行くなら :focus-within
もあると良いかも。
JavaScript でも
ホバーで何かツールチップ的なものを表示するものもありますが、そういうのは JS 制御ですね。matchMedia('(hover:hover)')
でやれます。
if (window.matchMedia('(hover:hover)').matches) { // ホバーで何か表示するとか }
タッチ対応端末
マウス(やペン)と画面タッチとを両方使える端末もあります。というか Windows ノートはだいたいそうですよね。
こちらに調べてくれた結果があります。
どうやら併用した場合でもどっちで触れたかにはよらないみたいです。
あとキーボードを取り外しできる 2-in-1 な端末、 Microsoft Surface は面白くて、ノートパソコンっぽく使っている間は hover:hover
なんだけど、キーボードを外す等でタブレットモードにすると hover:none
になっています。
ちなみに自分は ASUS の Zenbook シリーズのやつを使って画面タッチもできるやつなんだけど、なんか……日によって変わります……。なんで……。
今日は環境が hover になってるhttps://t.co/vnHKuXJOzb pic.twitter.com/3jCWYtGLy6
— 高梨ギンペイ (@ginpei_jp) December 4, 2023
環境が none に戻ったでござるhttps://t.co/vnHKuXJOzb pic.twitter.com/4J4x3D809s
— 高梨ギンペイ (@ginpei_jp) December 4, 2023
JavaScript でも
ちなみに JS なら Pointer Events の pointerType
で都度判定できます。
el.addEventListener("pointerenter", (event) => { const type = event.pointerType; // => "mouse" | "pen" | "touch" });
おしまい
Twitter ウェブ版はこれを使ってるっぽくて、自分の場合は日によってアカウントホバーで情報が出てきたり来なかったりします。制御する術を身に着けたい。
というわけで、ええと、なんかこう、便利に使ってください。