📝

`@media (pointer: fine)` がなかなか便利だったので tailwindcss で使う

2023/01/21に公開約1,300字

タイトル通りです。

メディア特性 pointer とは

pointer は CSS のメディア特性で、ユーザーが(マウスなどの)ポインティングデバイスを持っているか、もしそうならば、主要なポインティングデバイスにどれだけの正確性があるかを調べます。

キー 説明
none 主要な入力メカニズムに、ポインティングデバイスがありません
coarse 主要な入力メカニズムにポインティングデバイスがありますが、その正確性が限定されています
fine 主要な入力メカニズムにポインティングデバイスがあり、正確性も高いです

https://developer.mozilla.org/ja/docs/Web/CSS/@media/pointer

つまり @media (pointer: fine) でポインターがあるデバイス、@media (pointer: none) でポインターがないデバイスとそれぞれスタイルを出し分けれるってこと。

:hover とかポインターに付随するアニメーションを簡単に制御できるってこと 🤯

.hoge {
  background-color: blue;
}

@media (pointer: fine) {
  .hoge:hover {
    background-color: red;
  }
}

@media (pointer: none) {
  .hoge:hover {
    pointer-events: none;
  }
}

tailwindcss で使う方法

tailwindcss の標準のメディアクエリ設定だと min-widthmax-width しか設定できないのでカスタムメディアクエリとして登録する。

https://tailwindcss.com/docs/screens#custom-media-queries

tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  theme: {
    extend: {
      screens: {
        // 好きなディレクティブの名前を登録する
        pointer: { raw: "(pointer: fine)" },
      },
    },
  },
  // ...
};
<div class="text-rose-400 pointer:hover:text-sky-400">Hello, World</div>

動作イメージ

@media (pointer: fine) の時だけ pointer-events:hover を当ててる例

https://gyazo.com/2f718d762f5396379439f656531852d7

Discussion

ログインするとコメントできます