最近便利なCSSおれおれAdvent Calendar 2023 – 15 日目

メディアクエリーを使って切り替える場合ってだいたい画面の幅を見て、広ければパソコン、狭ければスマホ、という判断にしていることが多いかと思います。中間にタブレットを置いたり。

大きさとか配置とかはそれでもまあまあ大丈夫かなとは思うんですが、ユーザー操作（インタラクション）を考えると画面幅に依存するのは本質ではないなあという感じがしますよね。デバイスの特性を見てやりましょう。

例

ホバーで色を変えて強調表示するカード UI です。スマホ等で入力欄に触れるとホバー状態にしても反応してしまうのを制御できます。

1
2
3
4
5
6
7
.Card {
  @media (hover: none) {
    &:hover {
      background-color: #999;
    }
  }
}

ホバー状態にするべきかせぬべきかは迷うけど。する道を行くなら :focus-within もあると良いかも。

JavaScript でも

ホバーで何かツールチップ的なものを表示するものもありますが、そういうのは JS 制御ですね。matchMedia('(hover:hover)') でやれます。

1
2
3
if (window.matchMedia('(hover:hover)').matches) {
  // ホバーで何か表示するとか
}

タッチ対応端末

マウス（やペン）と画面タッチとを両方使える端末もあります。というか Windows ノートはだいたいそうですよね。

こちらに調べてくれた結果があります。

どうやら併用した場合でもどっちで触れたかにはよらないみたいです。

あとキーボードを取り外しできる 2-in-1 な端末、 Microsoft Surface は面白くて、ノートパソコンっぽく使っている間は hover:hover なんだけど、キーボードを外す等でタブレットモードにすると hover:none になっています。

ちなみに自分は ASUS の Zenbook シリーズのやつを使って画面タッチもできるやつなんだけど、なんか……日によって変わります……。なんで……。

JavaScript でも

ちなみに JS なら Pointer Events の pointerType で都度判定できます。

1
2
3
4
el.addEventListener("pointerenter", (event) => {
  const type = event.pointerType;
  // => "mouse" | "pen" | "touch"
});

おしまい

Twitter ウェブ版はこれを使ってるっぽくて、自分の場合は日によってアカウントホバーで情報が出てきたり来なかったりします。制御する術を身に着けたい。

というわけで、ええと、なんかこう、便利に使ってください。

参考