📝

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

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

CSS

Tailwind CSS

tech

タイトル通りです。

メディア特性 `pointer` とは

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

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

つまり @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-width と max-width しか設定できないのでカスタムメディアクエリとして登録する。

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 を当ててる例

Discussion

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

メディア特性 pointer とは

tailwindcss で使う方法

動作イメージ

Discussion

メディア特性 `pointer` とは